Как перебрать условные элементы для создания столбцов таблицы

Question

У меня есть массив предметов, и у каждого предмета есть номер дня. Для каждого дня будет несколько элементов, но я хочу динамически построить таблицу со столбцами для каждого дня. Это код, который у меня есть.

<table>
    <thead>
      <th *ngFor="let item of itemList|async">
        Day {{item.assignedPeriod.dayNumber}}
      </th>
    </thead>
  </table>

Очевидно, это создает новый столбец для каждого элемента независимо от того, был ли предыдущий элемент уже просмотрен в тот день. Я хочу, чтобы он пропустил создание нового столбца, если столбец уже существует для дня, и создал его, если он не существует.

Как мне это сделать?

Answer 1

Вам нужно перебрать ваши данные и создать массив объектов. Но я могу представить себе использование асинхронной трубы. Ну, вы можете использовать карту поверх наблюдаемого для преобразования данных, но я немного ленивый

Допустим, у вас есть такие данные, как:

data=[{day:1,name:"one",value:100},
  {day:1,name:"two",value:200},
  {day:2,name:"three",value:300},
  {day:1,name:"four",value:400},
  {day:3,name:"five",value:500},
  {day:2,name:"six",value:600}
  ]

Вы можете сделать что-то вроде

  array:any[]=[{}]
    this.data.forEach(x=>{
      let row=0;
      while (this.array[row]["day"+x.day])
      {
          row++
          if (!this.array[row])
             this.array[row]={}
      }

      this.array[row]["day"+x.day]=x
    })

И создайте таблицу как

<table>
  <th *ngFor="let keyPair of array[0]|keyvalue">{{keyPair.key}}</th>
  <tr *ngFor="let item of array;let i=index">
    <td *ngFor="let keyPair of array[0]|keyvalue">
      {{item[keyPair.key]?.value}}
    </td>
    </tr>
</table>

См. stackblitz