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

将动态列和数据绑定到Angular 7中的mat表，你可以使用Angular Material中的mat-table组件实现。

首先，你需要在项目中引入Angular Material库。在你的应用中的app.module.ts文件中，引入MatTableModule并将其添加到imports数组中：

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

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

接下来，创建一个包含表头定义和数据的组件。在组件的模板文件中，使用mat-table标签来定义表格的结构，使用mat-header-row和mat-row标签来定义表头行和数据行。在表头行中，使用ngFor指令动态生成表头列。然后，使用matCellDef指令定义每个单元格的内容，使用数据绑定将数据填充到表格中。

<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>

在组件的类中，定义一个数据源和显示的列数组，并在ngOnInit生命周期钩子中初始化数据源和显示的列：

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' }
    ];  // 设置数据源
  }
}

这样，动态列和数据就被绑定到了Angular 7中的mat-table中。你可以根据实际需求修改表头定义和数据源，实现你想要的动态展示效果。

关于Angular Material的更多详细信息，你可以查看Angular Material官方文档。

对于腾讯云相关产品，可使用腾讯云提供的Serverless Framework和云函数SCF来部署和管理前端应用、后端逻辑和数据接口。你可以参考以下腾讯云产品：