Angular 5 + Angular Material数据表：如何为行添加动态favorite列数据？

嘿，这事儿不难，我来一步步教你怎么把嵌套的动态数据（比如你示例里的favorite列）渲染到Angular Material数据表中：

1. 定义数据表的列结构 #

首先你需要在模板里给数据表新增favorite列的表头和对应的单元格模板，和其他列保持一致的结构即可：

<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 其他已有列的定义（示例） -->
  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
  </ng-container>

  <!-- 新增的favorite列 -->
  <ng-container matColumnDef="favorite">
    <mat-header-cell *matHeaderCellDef> favorite </mat-header-cell>
    <mat-cell *matCellDef="let element">
      <!-- 循环渲染嵌套数组里的动态数据 -->
      <span *ngFor="let food of element.favorite.favoriteFood; let last = last">
        {{food}}<span *ngIf="!last">, </span>
      </span>
    </mat-cell>
  </ng-container>

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

2. 更新组件TS代码 #

在组件类里，要确保displayedColumns数组包含新增的favorite列，同时数据源的结构要和你定义的接口匹配（这里补全你给的样例数据）：

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

// 定义数据结构接口
export interface Element {
  position: number;
  firstName: string;
  lastName: string;
  email: string;
  favoriteColor: string;
  favorite: {
    favoriteFood: string[];
  };
}

// 模拟数据源
const ELEMENT_DATA: Element[] = [
  { 
    position: 1, 
    firstName: 'John', 
    lastName: 'Doe', 
    email: 'john@gmail.com', 
    favoriteColor: 'red', 
    favorite: { favoriteFood: ['Idly', 'Dosa', 'Vada'] } 
  },
  { 
    position: 2, 
    firstName: 'Jane', 
    lastName: 'Smith', 
    email: 'jane@gmail.com', 
    favoriteColor: 'blue', 
    favorite: { favoriteFood: ['Pizza', 'Burger'] } 
  }
];

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent {
  // 要显示的列集合，必须包含新增的favorite
  displayedColumns: string[] = ['position', 'firstName', 'lastName', 'email', 'favoriteColor', 'favorite'];
  dataSource = ELEMENT_DATA;
}

3. 关键细节提醒 #

• 为了避免数据加载时出现Cannot read property 'favoriteFood' of undefined的错误，建议使用安全导航操作符?.，把循环部分改成：

  <span *ngFor="let food of element.favorite?.favoriteFood; let last = last">
  

• 如果存在favoriteFood数组为空的情况，可以加个默认提示：

  <span *ngIf="element.favorite?.favoriteFood?.length === 0">暂无偏好食物</span>
  

这样就能把嵌套的动态数据正确渲染到每行的favorite列里啦！

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