Question

我知道有很多关于如何在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？ ngFors是否需要位于相同的div或主要ngFor的子元素中？

我拥有的ngFors是：

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

Answer 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>

迭代Angular 2中JSON数组中的子项

1 个答案: