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

【问题标题】：Angular 6 check for the existence of a variable with ngIfAngular 6 使用 ngIf 检查变量是否存在
【发布时间】：2019-05-08 19:43:42
【问题描述】：

如何使用 ngIf 在嵌套的 json 对象中检查角度 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}}

【问题讨论】：

标签： loops angular6 ngfor angular-ng-if

【解决方案1】：

你们很亲密。 :)

在第一个不起作用的<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>

这是一个Working Stackblitz 展示了这一点。

我希望这会有所帮助。

【讨论】：