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

【问题标题】：Ngfor list of object and loop again from an array inside one of the object in the main arrayNgfor 对象列表并再次从主数组中的对象之一内的数组循环
【发布时间】：2017-04-10 14:43:26
【问题描述】：

您好，我有以下数据结构，

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中实现这一点，这样我就可以获得如图所示的预期结果。在此先感谢各位。

【问题讨论】：

这里你错了<tr class="time" *ngFor="let x of _days.timing"> 这里你分配了_days.timing 这没什么

标签： javascript jquery html angular typescript

【解决方案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>

【讨论】：