时间戳

首页 > 解决方案 > Angular 6 使用 ngIf 检查变量是否存在

loops - Angular 6 使用 ngIf 检查变量是否存在

问题描述

如何在嵌套的 json 对象中使用 ngIf 检查角度 6 中的值是否存在？我从 api 调用返回了这个 Json：

 {

 "orth": ["axxam"],

 "gram":[
      {"pos": ["isem"],
       "feminine": ["taxxamt"],
       "plural":"ixxamen"}
        ]
  }

我设法获得了“orth”和“pos”的值。我不能得到的是：我想首先测试 pos == isem，当且仅当这是真的，然后我将显示“女性”和“复数”的值。这是到目前为止的代码：

 <span> spelling: {{elements?.orth}}</span> 
 <span> POS: {{elements?.gram[0].pos}}</span>

以下不起作用：

  <span *ngIf="elements?.gram[0].pos===isem"> POS: 
 {{elements?.gram[0].feminine}}</span>

另外，我可以遍历对象吗？我试过这个没有结果：

 <span *ngFor="let element of elements.gram | keyvalue">
  {{element.key}}: {{element.value}}

标签： loopsangular6ngforangular-ng-if

解决方案

你非常亲近。:)

在第一个<span>不起作用的地方，elements?.gram[0].pos实际上是一个数组，所以应该像这样引用：elements?.gram[0].pos[0]. 同样要比较一个字符串，您需要将字符串括在引号中，因为您编写它时，代码将尝试与elements?.gram[0].pos名为isem. 把它们放在一起，它看起来像这样：

<span *ngIf="elements?.gram[0].pos[0]==='isem'"> 
    POS: {{elements?.gram[0].feminine}}
</span>

对于您的循环，elements?.gram是一个只有一个元素的数组，它是一个对象 - 该对象包含三个元素。如果要遍历数组内的对象，请*ngFor像这样指定：

<span *ngFor="let element of elements?.gram[0] | keyvalue">
    {{element.key}}: {{element.value}}
</span>

这是一个正在运行的Stackblitz，展示了这一点。

我希望这有帮助。

推荐阅读