Json对象迭代Angular 2

Posted 2023-03-13

【中文标题】Json对象迭代Angular 2

【英文标题】：Json object iteration 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 内部查看它的外观。让我知道它是否看起来与应该（或不）不同

【参考方案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() 函数。 i.floorName j.resFloor k.roomNum

这符合您的要求吗？

【参考方案2】：

您以错误的方式进行迭代，因为您可能认为您的第二个循环依赖于第一个但不是，它们是不同的，所以当您尝试访问第二个循环时，i 等于 undefined。

试试这样的

<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 元素。