javascript - Ngfor 对象列表并从主数组中的对象之一内的数组再次循环

Question

嗨，我有以下数据结构，

this._days=[

            {
               "day": "",
               "timing": {}
            },
            {
               "day": "Monday",
               "timing": [
                       {'9:00AM-10:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'10:00AM-11:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'11:00AM-12:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'12:00AM-13:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'13:00AM-14:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}
                    ]
            },
            {
               "day": "Tuesday",
               "timing": [
                       {'9:00AM-10:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'10:00AM-11:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'11:00AM-12:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'12:00AM-13:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}, 
                       {'13:00AM-14:00AM': {'subject': 'Physics','teacher': 'Amanda','Location': 'Room 05'}}
                    ]
            },
...

我想显示像

这样的值

在我的 html 中我尝试过，

<table width="100%" align="center" height=100%;>
    <tr class="day">
        <th *ngFor="let row of _days">{{row.day}}</th>
    </tr>
    <tr class="time" *ngFor="let x of _days.timing">
        <th style="width:100px">{{_days.timing[x][key]}}</th>
            <td>{{_days.timing[x].value}}</td>
    </tr>
</table>

无论如何，我可以在我的html中实现这一点，这样我就可以获得如图所示的预期结果。提前谢谢大家。

Answer 1

首先，您需要根据时间过滤数据

var tabelRows = {};
var firstRow = [];
_days.forEach(function(v,i){
   v.timing.forEach(function(val,ind) {
      var row = Object.keys(val)[0];
      if(firstRow.indexOf(row) == -1) {
           firstRow.push(row);
           tabelRows[row] = [val[row]];
      } else {
      tabelRows[row].push(val[row]);
      }
   });
});

然后执行 forEach 循环，如下所示:

<tr class="time" *ngFor="let x of firstRow">
        <th style="width:100px">{{x}}</th>
            <td *ngFor="let y of tabelRows[x]">{{y.subject}}</td>
    </tr>