Angular 5中嵌套NgFor遍历对象数组的技术实现问题

嘿，我看你在写Angular 5模板时，用嵌套*ngFor遍历对象数组遇到了小问题，这就帮你搞定！

首先，你的核心需求是遍历copyToArray这个对象数组，把每个对象里的copyFromDay作为标题，对应的days数组作为子列表展示。你原来的代码里有两个小疏漏：一是内层循环的数据源没写完整，二是直接写变量名没加插值表达式。

修正后的完整HTML代码 #

<table>
  <tr>
    <!-- 外层循环遍历每个源日期对象 -->
    <td *ngFor="let sourceDay of copyToArray">
      <!-- 用插值表达式显示源日期 -->
      <label>{{ sourceDay.copyFromDay }}</label>
      <!-- 内层循环遍历当前对象的days数组 -->
      <ul>
        <li *ngFor="let day of sourceDay.days">
          {{ day }}
        </li>
      </ul>
    </td>
  </tr>
</table>

几个关键细节要注意 #

• 内层循环的数据源：必须用sourceDay.days，因为外层循环的每个sourceDay就是数组里的单个对象，它的days属性才是我们要遍历的子数组，你之前的代码里写了sou...没写完，这是主要问题。
• 变量值的显示：Angular模板里要显示组件变量的值，必须用双大括号{{ }}包裹，不然会直接把字符串sourceDay.copyFromDay打印出来，而不是变量对应的内容。

组件类里的变量声明（补充） #

确保你的组件类里已经正确定义了copyToArray变量，比如：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 定义要遍历的对象数组
  copyToArray = [ 
    { "copyFromDay": "Sunday", "days": [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ] }, 
    { "copyFromDay": "Monday", "days": [ "Sunday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ] }
    // 可以继续添加其他对象
  ];
}

这样就能正常渲染出每个源日期对应的子日期列表啦～

内容的提问来源于stack exchange，提问作者Kaushik