在Angular 2中迭代JSON数组中的子项答案

【问题标题】：Iterating over sub items in a JSON array in Angular 2在Angular 2中迭代JSON数组中的子项
【发布时间】：2018-02-22 16:00:22
【问题描述】：

我知道有很多关于如何在 Angular 2 中迭代 JSON 项目的答案，但我正在努力解决这个问题（没有双关语）：

{
    "datesofinterest": [ 
     {
        "name": "Holidays",
        "year": "2017",
        "version": "3.0",
        "dataitems": [{
            "langauage": "english",
            "listvalues": [{
                    "id": "bac34a",
                    "name": "New Year's Day",
                    "value": "New Year's Day",
                    "startdatetime": "02/01/2017 00:00:00 AM",
                    "enddatetime": "02/01/2017 11:59:59 PM",
                    "description":"The first day of the year",
                    "type":"statutory"
                },
                {
                    "id": "cad54b",
                    "name": "Family Day",
                    "value": "Family Day",
                    "startdatetime": "20/02/2017 00:00:00 AM",
                    "enddatetime": "20/02/2017 11:59:59 PM",
                    "description":"Board Game Day with the family",
                    "type":"statutory"
                },
                {
                    "id": "eac453a",
                    "name": "Good Friday",
                    "value": "Good Friday",
                    "startdatetime": "14/04/2017 00:00:00 AM",
                    "enddatetime": "14/04/2017 11:59:59 PM",
                    "description":"Easter",
                    "type":"statutory"
                }
            ]
        }, {
            "langauage": "french",
            "listvalues": [{
                    "id": "af73jaah",
                    "name": "Jour de l'An",
                    "value": "Jour de l'An",
                    "startdatetime": "02/01/2017 00:00:00 AM",
                    "enddatetime": "02/01/2017 11:59:59 PM",
                    "description":"The first day of the year",
                    "type":"statutory"
                },
                {
                    "id": "lksf8us877",
                    "name": "Journée familiale",
                    "value": "Journée familiale",
                    "startdatetime": "20/02/2017 00:00:00 AM",
                    "enddatetime": "20/02/2017 11:59:59 PM",
                    "description":"Board Game Day with the family",
                    "type":"statutory"
                },
                {
                    "id": "l98jhsd",
                    "name": "Vendredi saint",
                    "value": "Vendredi saint",
                    "startdatetime": "14/04/2017 00:00:00 AM",
                    "enddatetime": "14/04/2017 11:59:59 PM",
                    "description":"Easter",
                    "type":"statutory"
                }
            ]
        }]
    }]
}

我将如何为此编写 *ngFor？ ngFor 需要在同一个 div 中还是作为主 ngFor 的子元素？

我拥有的 ngFors 是：

*ngFor="let datesofinterest of alldatesofinterests"
*ngFor="let dataitem of datesofinterest.dataitems"
*ngFor="let listvalue of daysofinterest.dataitems.listvalues"

【问题讨论】：

datesofinterest 不是数组？
根据您的 json，alldatesofinterests 是什么？
datesofinterest 是一个数组 - 感谢您指出这一点
alldatesofinterests - 这部分 Angular 2 指令循环遍历 JSON 文件

标签： json angular

【解决方案1】：

单个元素上只能有 1 个 *ngFor。同样在您的第二个 ngFor 中，您可以使用第一个 ngFor 中声明的 dataitem 变量。如果你不想用太多的 div 污染生成的 html，你可以使用 <ng-container> 元素，因为它们不会被渲染。

<ng-container *ngFor="let dataitem of datesofinterest.dataitems">
  <ng-container *ngFor="let listvalue of dataitem.listvalues">
    {{listvalue.name}}
  </ng-container>
</ng-container>

【讨论】：