Angular 2 ngFor无法通过索引

时间:2017-10-17 10:41:28

标签: javascript arrays angular object angular2-template

我的模板中有循环问题。我必须在一个房间的选项卡中选择一个roomRows(例如Kitchen),我有循环问题,因为我无法通过索引选择元素。这是我的模板:

<tabset #staticTabs>
<div *ngFor="let rooms of renovation">
    <div *ngFor="let room of rooms.rooms;let i = index">
        <tab heading="{{room.roomName}} {{i}}" [attr.data-index]="i">
            <div *ngFor="let row of room.roomRows">
                {{row.typeOfWorks | json}}{{i}}
            </div>
        </tab>
    </div>
</div>
</tabset>

这是我的json文件的一部分。

                'name': 'remont',
                'zipCode': 500,
                'rooms': [
                    {
                        "roomId": 1,
                        "roomName": "Kitchen",
                        "roomRows": [
                                {   
                                "id": 1,
                                "typeOfWorks": "Malowanie ścian",
                                "costOfMaterials": 1500,
                                "costOfWorks": 2100,
                                "accept": false
                                },
                                {
                                "id": 2,
                                "typeOfWorks": "Podłogi",
                                "costOfMaterials": 2650,
                                "costOfWorks": 1800,
                                "accept": true
                                },
                                {
                                "id": 3,
                                "typeOfWorks": "Okna",
                                "costOfMaterials": 1200,
                                "costOfWorks": 450,
                                "accept": true
                                },
                                {
                                "id": 4,
                                "typeOfWorks": "Drzwi",
                                "costOfMaterials": 850,
                                "costOfWorks": 250,
                                "accept": true
                                }
                        ]
                    },
                    {
                        "roomId": 2,
                        "roomName": "Toilet",
                        "roomRows": [
                                {   
                                "id": 1,
                                "typeOfWorks": "Malowanie ścian",
                                "costOfMaterials": 1524500,
                                "costOfWorks": 30,
                                "accept": false
                                },
                                {
                                "id": 2,
                                "typeOfWorks": "Podłogi",
                                "costOfMaterials": 5650,
                                "costOfWorks": 14550,
                                "accept": true
                                },
                                {
                                "id": 3,
                                "typeOfWorks": "Okna",
                                "costOfMaterials": 1200,
                                "costOfWorks": 450,
                                "accept": true
                                },
                                {
                                "id": 4,
                                "typeOfWorks": "Drzwi",
                                "costOfMaterials": 850,
                                "costOfWorks": 250,
                                "accept": true
                                }

                        ]
                    },
                    {
                        "roomId": 3,
                        "roomName": "Corridor",
                        "roomRows": [
                            {   
                                "id": 1,
                                "typeOfWorks": "Malowanie ścian",
                                "costOfMaterials": 1500,
                                "costOfWorks": 2100,
                                "accept": false
                                },
                                {
                                "id": 2,
                                "typeOfWorks": "Podłogi",
                                "costOfMaterials": 2650,
                                "costOfWorks": 1800,
                                "accept": true
                                },
                                {
                                "id": 3,
                                "typeOfWorks": "Okna",
                                "costOfMaterials": 1200,
                                "costOfWorks": 450,
                                "accept": true
                                },
                                {
                                "id": 4,
                                "typeOfWorks": "Drzwi",
                                "costOfMaterials": 850,
                                "costOfWorks": 250,
                                "accept": true
                                }
                        ]
                    },
                        {
                        "roomId": 4,
                        "roomName": "Bathroom",
                        "roomRows": [
                            {   
                                "id": 1,
                                "typeOfWorks": "Malowanie ścian",
                                "costOfMaterials": 1500,
                                "costOfWorks": 2100,
                                "accept": false
                                },
                                {
                                "id": 2,
                                "typeOfWorks": "Podłogi",
                                "costOfMaterials": 2650,
                                "costOfWorks": 1800,
                                "accept": true
                                },
                                {
                                "id": 3,
                                "typeOfWorks": "Okna",
                                "costOfMaterials": 1200,
                                "costOfWorks": 450,
                                "accept": true
                                },
                                {
                                "id": 4,
                                "typeOfWorks": "Drzwi",
                                "costOfMaterials": 850,
                                "costOfWorks": 250,
                                "accept": true
                                }
                        ]
                    },
                ]

            },

一个标签必须向一个房间显示所有roomRows信息。我尝试添加索引但我的模板行是对象的集合。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

我想它应该采用这种格式

<div *ngFor="let rooms of renovation.rooms; let i = index">
  <div *ngFor="let row of rooms.roomRows; let j = index">
       {{row.typeOfWorks | json}}{{i}} {{j}}
  </div>
</div>

https://plnkr.co/edit/iTtaU4pU07TsQbRwHJ2G?p=preview