Angular 角度：检查json属性

好的，所以我面临一个问题，找不到解决办法

请仔细阅读

我想在我的角度模板中检查属性，然后将样式附加到它

问题：它只适用于第一个子属性

例如，我想对我的div应用一些样式，所以我选中以下选项：

[ngStyle]="{'flex-flow': data.section.a.subtitle ? 'column' : 'row' }"

Angular只能检查第一个路径

数据。部分

我知道这一点，因为我在其他情况下尝试了嵌套的

*ngIf

，例如，如果JSON结构是

"batters":
        {
          "batters":
             { "id": "1001", "type": "Regular" }
          }

我想检查angular中的'id'属性，我需要执行以下操作：

<ng-container *ngIf="batters">
  <ng-container *ngIf="batters.batters">
    <ng-container *ngIf="batters.batters.id">
        {{ batters.batters.id }}
    </ng-container>
   </ng-container>
</ng-container>

因此，在本例中，我可以嵌套

*ngIf

，但是对于上面的示例，我可以做什么呢？

---

是否有更好的方法来检查Angular中的嵌套道具？

您可以使用save Navigation操作符

？

来避免此类错误：

{{batters？.batters？.id}

---

关于，

通常，当从api请求json数据时会发生此错误，因此如果您不初始化对象的属性，您将尝试以未定义的方式执行此操作

安全导航操作员将检查未定义的属性值，并尝试访问下一个属性

 <ng-container *ngIf="batters?.batters?.id">...</ng-container>

。。。

你需要使用？。如果要初始化属性，则始终使用运算符 稍后通过任何异步操作http，setTimeout

---

是的，您可以通过使用

&

运算符在这样的单个if条件下绑定

<ng-container *ngIf="batters && batters.batters && batters.batters.id">
   {{ batters.batters.id }}
</ng-container>

{{batters.batters.id}

---

我想这就是你所期望的-希望它能帮助你快乐地编码

感谢您解释绑定条件的另一种方法！我想这是为什么？。使用了

batters&&batters.batters&&batters.batters.id

vs

batters？.batters？.id

<ng-container *ngIf="batters && batters.batters && batters.batters.id">
   {{ batters.batters.id }}
</ng-container>