Question

我有问题迭代到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"
                                }
                            ],
                        },
                    ],
                }
            ],
        }
  ]

地板template.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，那么除了1st for循环的结果之外什么都没有出现，然后该按钮什么都不做。我究竟做错了什么。请指出正确的方向。谢谢！

Answer 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 - 声明一个单击的变量并编写此函数

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

Answer 2

您正在以错误的方式进行迭代，因为您可能认为第二个循环取决于第一个循环但不是，它们是不同的，所以当您尝试访问第二个循环时，我等于未定义。

尝试这样的事情

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

另外，我更改了html元素，因为你错误地使用了它们，按钮不应该包含div元素。

Json对象迭代Angular 2

2 个答案: