根据 material table of Angular 9 中的值在一列中显示多个数据数组

Question

我有这个数据。服务值为真时如何在table中显示？像下面这样的东西。

Table 应该是：

ID     Services
5      service1,service3

数据：

  {   
    id: 5, 
    services:
    { 
       service1: true, 
       service2: false, 
       service3: true, 
    }
  }

html

      <ng-container matColumnDef="id"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>QTY</mat-header-cell>
        <mat-cell *matCellDef="let purchaseOrder">{{purchaseOrder.id}}</mat-cell>
      </ng-container>

     <ng-container matColumnDef="services"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>Equipment Ordered</mat-header-cell>
        <mat-cell *matCellDef="let purchaseOrder">{{purchaseOrder.services}}</mat-cell>
      </ng-container>

Answer 1

您可以在过滤服务的组件中使用自定义方法：

getRequiredServices(servicesObject) {
 return Object.keys(servicesObject).filter(service => servicesObject[service]).join();
}

并在您的 HTML 中：

<ng-container matColumnDef="services">
  <mat-header-cell *matHeaderCellDef mat-sort-header>Equipment Ordered</mat-header-cell>
  <mat-cell *matCellDef="let purchaseOrder">{{getRequiredServices(purchaseOrder.services)}}</mat-cell>
</ng-container>

更新

按照您在评论中提出的要求以这种方式修改方法（return 具有所有真实属性的字符串）：

getRequiredServices(servicesObject) {
  return Object.entries(servicesObject).reduce(
    (requiredServices, [key, value]) => {
      if (typeof value === 'boolean' && value) {
        requiredServices.push(key);
      } else if (typeof value === 'string' && value) {
        requiredServices.push(value);
      }
      return requiredServices;
    },
    []
  ).join();
}

根据 material table of Angular 9 中的值在一列中显示多个数据数组

Display multiple data array in one column depending on value in material table of Angular 9

angular

mat-table

angular9