强制MatTable呈现新行

import { Component, ViewChild } from '@angular/core';
import { MatTable } from '@angular/material/table';

@Component({
  selector: 'app-table',
  template: `
    <table mat-table [dataSource]="dataSource">
      <!-- 表格列定义 -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let row">{{row.name}}</td>
      </ng-container>

      <!-- 其他列定义... -->

      <!-- 表格行定义 -->
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <button (click)="addNewRow()">Add New Row</button>
  `,
})
export class TableComponent {
  @ViewChild(MatTable) table: MatTable<any>;

  displayedColumns: string[] = ['name', 'other columns...'];
  dataSource: any[] = [];

  addNewRow() {
    const newRow = { name: 'New Row' };
    this.dataSource.push(newRow);
    this.table.renderRows();
  }
}