Angular 2 ngFor 无法按索引显示一个对象

Question

我的模板中有循环问题。我必须在一个房间的选项卡中 select 一个 roomRows（例如厨房），并且循环有问题，因为我不能按索引 select 元素。这是我的模板：

<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 信息。我尝试添加索引，但我的模板行是对象集合。有什么想法吗？

Answer 1

我猜应该是这样的格式

<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

Angular 2 ngFor 无法按索引显示一个对象

Angular 2 ngFor can't show one object by index

javascript

arrays

object

angular2-template

angular