Json对象迭代Angular 2答案

【问题标题】：Json object iteration Angular 2Json对象迭代Angular 2
【发布时间】：2017-07-26 13:22:48
【问题描述】：

我在遍历 json 对象时遇到问题。

这是 Json 示例：

floors.ts

this.floors= [
      {
            floorName: "floor 1",
            result: [
                {
                    resFloor: "1",
                    floorResult: [
                        {
                            roomNum: "room 1",
                            roomResult: [
                                {
                                    bedNum: "1"
                                },
                                {
                                    bedNum: "2"
                                },
                                {
                                    bedNum: "3"
                                }
                            ],
                        },
                        {
                            roomNum: "room 2",
                            roomResult: [
                                {
                                    bedNum: "1"
                                },
                                {
                                    bedNum: "2"
                                },
                                {
                                    bedNum: "3"
                                }
                            ],
                        },
                        {
                            roomNum: "room 3",
                            roomResult: [
                                {
                                    bedNum: "1"
                                },
                                {
                                    bedNum: "2"
                                },
                                {
                                    bedNum: "3"
                                }
                            ],
                        },
                    ],
                }
            ],
        }
  ]

地板模板.html

<button *ngFor="let i of floors">
{{i.floorName}}
<div *ngIf="clicked">
  <button *ngFor="let j of i.result">
    {{j.resFloor}}
    <div *ngIf="clicked">
      <button *ngFor="let k of j.floorResult">
        {{k.roomNum}}
      </button>
    </div>
  </button>
 </div>

我想要做的是我想遍历这个 json。在 ngIf 中，clicked 是布尔值，如果它设置为 true，那么它会给我所有 ngFor 循环的结果，然后它给我一个错误；如果它设置为 false 那么除了第一个 for 循环的结果之外什么都不会出现，然后那个按钮什么也不做。我究竟做错了什么。请指出正确的方向。谢谢！！

【问题讨论】：

你遇到了什么错误？
@Amit 我收到此错误EXCEPTION: Cannot read property 'floorResult' of undefined
你能发布你的整个 json 吗？
@Amit 我已经编辑了 floor.ts
嗯，我建议注释掉有问题的 ngFor 并输出 {{j | json}} 并从 ngFor 内部查看它的外观。让我知道它是否看起来与应该（或不）不同

标签： html json angular typescript

【解决方案1】：

您的情况无法正常工作。这在第一次点击时对我有用。（我没有更进一步）

HTML

 <button *ngFor="let i of floors" (click)="wasClicked()">
        {{i.floorName}}
        <div *ngIf="clicked === true">
            <button *ngFor="let j of i.result">
                {{j.resFloor}}
                <div *ngIf="clicked">
                    <button *ngFor="let k of j.floorResult">
                        {{k.roomNum}}
                    </button>
                </div>
            </button>
        </div>
    </button>

Typescript - 声明一个 clicked 变量并编写此函数

wasClicked() {
    this.clicked = true;
    console.log('clicked: ' + this.clicked);
}

【讨论】：

嘿，所以我使用你的 name 方法获得了所有按钮，但你知道我该怎么做：如果我只点击 floorName 按钮，那么 resFloor for 循环应该运行，这应该发生在for 循环的其余部分。谢谢
我不是 100% 确定你想要什么，但试试这个。它仅在单击 floor1 时显示一个带有 1 的框，然后如果单击该框，它会显示房间。您将需要声明另一个布尔值和另一个 wasClicked() 函数。

这符合您的要求吗？