Отображение нескольких массивов данных в одном столбце в зависимости от значения в таблице материалов Angular 9

Question

У меня есть эти данные. Как отобразить в таблице значение услуги true? Примерно так ниже.

Таблица должна быть:

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>

update

Измените метод таким образом, как вы просили в комментариях:

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