如何用数据库返回的动态对象数组填充Angular Material2表格组件？

嘿，我来帮你搞定这个问题！其实用对象数组填充Angular Material表格非常直观，咱们一步步来操作：

1. 引入并初始化表格数据源 #

Angular Material表格依赖MatTableDataSource来管理数据，首先你需要在组件的TS文件里导入这个类，然后把你的tablePopulate数组作为数据源传入：

// 在组件顶部导入必要的类
import { MatTableDataSource } from '@angular/material/table';

@Component({
  // 组件元数据（你的选择器、模板路径等）
})
export class YourTableComponent {
  // 你的原始数据数组
  tablePopulate = [ 
    {id: '1', name: 'Jimmy', progress: '10%', color: 'blue'}, 
    {id: '2', name: 'John', progress: '40%', color: 'yellow'}, 
    {id: '3', name: 'Wright', progress: '70%', color: 'orange'} 
  ];

  // 初始化表格数据源
  dataSource = new MatTableDataSource(this.tablePopulate);
}

2. 定义要显示的列 #

接下来，你需要定义一个字符串数组，用来指定表格要展示哪些列，数组里的每一项必须和你数据对象的属性名完全对应：

// 放在组件类里
displayedColumns: string[] = ['id', 'name', 'progress', 'color'];

3. 在HTML模板中绑定数据 #

现在把数据源和列定义绑定到表格模板上，通过*matCellDef来遍历每一行数据，取出对应属性的值：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- ID列 -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

  <!-- 姓名列 -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 姓名 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- 进度列 -->
  <ng-container matColumnDef="progress">
    <th mat-header-cell *matHeaderCellDef> 进度 </th>
    <td mat-cell *matCellDef="let element"> {{element.progress}} </td>
  </ng-container>

  <!-- 颜色列 -->
  <ng-container matColumnDef="color">
    <th mat-header-cell *matHeaderCellDef> 颜色 </th>
    <td mat-cell *matCellDef="let element"> {{element.color}} </td>
  </ng-container>

  <!-- 表头行和数据行 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

4. 处理异步获取的数据库数据 #

如果你的tablePopulate是通过HTTP请求从数据库异步获取的（这是更常见的场景），记得在数据返回后更新数据源：

import { HttpClient } from '@angular/common/http';

@Component({
  // 组件元数据
})
export class YourTableComponent {
  dataSource = new MatTableDataSource<any>([]);
  displayedColumns: string[] = ['id', 'name', 'progress', 'color'];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // 模拟从数据库接口获取数据
    this.http.get('你的数据库接口地址').subscribe((data: any[]) => {
      // 更新数据源
      this.dataSource.data = data;
      // 或者直接重新初始化数据源：this.dataSource = new MatTableDataSource(data);
    });
  }
}

小提示 #

如果之后需要添加过滤、排序或分页功能，只需要给dataSource配置对应的filterPredicate、排序器或分页器即可，Angular Material表格已经封装好了这些功能~

内容的提问来源于stack exchange，提问作者RulerNature