如何在Angular 7的表格中添加行组件？

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  rows: any[] = [
    { name: 'Row 1', value: 1 },
    { name: 'Row 2', value: 2 },
    { name: 'Row 3', value: 3 }
  ];

  addRow() {
    this.rows.push({ name: 'New Row', value: this.rows.length + 1 });
  }
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows">
      <td>{{ row.name }}</td>
      <td>{{ row.value }}</td>
    </tr>
    <app-row *ngFor="let row of rows" [data]="row" (event)="handleEvent($event)"></app-row>
  </tbody>
</table>

<button (click)="addRow()">Add Row</button>

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-row',
  templateUrl: './row.component.html',
  styleUrls: ['./row.component.css']
})
export class RowComponent {
  @Input() data: any;
  @Output() event: EventEmitter<any> = new EventEmitter();

  handleClick() {
    this.event.emit('Clicked');
  }
}

<tr>
  <td>{{ data.name }}</td>
  <td>{{ data.value }}</td>
  <td><button (click)="handleClick()">Click</button></td>
</tr>