如何在 angular 中添加子组件

Question

我在将组件用作子组件时遇到问题。当用户单击应该呈现的按钮时，我需要加载一些 table 值。但我对此一无所知。这是示例：

@ViewChild(ConfigurationTableComponent) tableComponent: ConfigurationTableComponent;

并且UI喜欢：

<button class="btn btn-success" (click)="addElement()">Add new table row</button>

和addElement()函数：

  addElement(event: { stopPropagation: () => void; }) {
    this.table.nativeElement.insertAdjacentHTML('beforeend', ConfigurationTableComponent);
    event.stopPropagation();
  }

我想要的是当我单击按钮时它应该在 table.

中再添加一行

Here is an example

Answer 1

您正在尝试 jQuery 方式。 Angular 就像这样：

      <tr *ngFor="let row of elements, let i = index">
        <td>{{i + 1}}</td>
        <td>{{row.lastName}}</td>
        <td>{{row.firstName}}</td>
        <td>{{row.age}}</td>
      </tr>

  elements = [];

  addElement() {
    this.elements = [...this.elements, {lastName: 'Doe', firstName: 'John', age: 26}]
  }

这里是 stackblitz： https://stackblitz.com/edit/angular-waxqv1?file=src/app/app.component.html

如何在 angular 中添加子组件

How to add component as child in angular

angular

angular7