Question

好，所以我遇到了一个问题，找不到解决方法

请仔细阅读

我想在我的角度模板中签入一个属性，然后在其上附加样式。

问题：它仅适用于第一个子资源。

例如，我想对我的div应用某种样式，因此我检查了此内容：

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

Angular只能检查第一个路径data.section

我知道，因为在其他情况下，例如，如果JSON结构为

，我尝试使用嵌套的*ngIf

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

我想按角度检查'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>

如果我想直接进入道具，例如：<ng-container *ngIf="batters.batters.id">，我明白了：

ERROR TypeError: Cannot read property 'id' of undefined

因此，在这种情况下，我可以嵌套*ngIf，但是对于上面的示例我该怎么办？有没有更好的方法来检查Angular中的嵌套prop？

Answer 1

是的，您可以使用&运算符

来绑定单个if条件

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

我认为这是您所期望的-希望它有助于编写快乐的代码！

Answer 2

您可以使用保存导航运算符EOT来避免这种错误：

;

此致

Answer 3

通常会在需要从api请求json数据时发生此错误，因此，如果不初始化对象的属性，您将最终尝试用这种方式undefined.proprty。

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

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

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

Angular：检查json属性

3 个答案: