在使用Angular 8向Mat-Table添加动态列的同时添加行

ng add @angular/material

import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';

@NgModule({
  imports: [
    MatTableModule,
    MatSortModule
  ],
  ...
})

<table mat-table [dataSource]="dataSource" matSort>
  <!-- 添加动态列 -->
  <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column }}</th>
    <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
  </ng-container>

  <!-- 添加行 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

export class YourComponent implements OnInit {
  dataSource: any[]; // 数据源
  displayedColumns: string[]; // 显示的列

  ngOnInit() {
    // 初始化数据源和显示的列
    this.dataSource = [
      { name: 'John', age: 25, city: 'New York' },
      { name: 'Alice', age: 30, city: 'London' },
      { name: 'Bob', age: 35, city: 'Paris' }
    ];
    this.displayedColumns = ['name', 'age', 'city'];
  }
}