如何遍历条件项以生成表列

Question

我有一个项目数组，每个项目都有一个天数。每天都会有多个项目，但我想动态构建一个包含每天列的表。这是我到目前为止的代码。

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

显然，这会为每个项目生成一个新列，而不管当天是否已经看到了前一个项目。我希望它跳过制作一个新的列，如果该列已经存在的一天，并创建一个如果它不存在。

我该怎么办？

Answer 1

您需要在数据上循环并创建一个对象数组。但我可以想象使用异步管道。嗯，你可以使用可观察的映射来转换数据，但我有点懒

Supouse您有如下数据：

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