根据 Angular 9 的材料表中的值，在一列中显示多个数据数组

Question

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

表应为：

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>

更新

按照您在注释中提出的要求以这种方式修改方法(返回一个具有所有真实属性的字符串(：

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();
}