将动态列和数据绑定到angular 7中的mat表

import { MatTableModule } from '@angular/material';

@NgModule({
  imports: [MatTableModule],
  ...
})
export class AppModule { }

<table mat-table [dataSource]="dataSource">

  <ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
    <th mat-header-cell *matHeaderCellDef>{{ 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>

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

@Component({
  ...
})
export class YourComponent implements OnInit {
  displayedColumns: string[];  // 显示的列数组
  dataSource: any[];  // 数据源

  ngOnInit() {
    this.displayedColumns = ['name', 'age', 'gender'];  // 设置显示的列
    this.dataSource = [
      { name: 'Alice', age: 25, gender: 'Female' },
      { name: 'Bob', age: 30, gender: 'Male' },
      { name: 'Charlie', age: 35, gender: 'Male' }
    ];  // 设置数据源
  }
}