Angular6 用ngIf检查变量是否存在

Question

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

 {

 "orth": ["axxam"],

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

我设法获得了 "orth" 和 "pos" 的值。我无法得到的是：我想首先测试 pos == isem，当且仅当这是真的，然后我将显示 "feminine" 和 "plural" 的值。这是到目前为止的代码：

 <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}}

Answer 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 展示这个动作的例子。

希望对您有所帮助。

Angular6 用ngIf检查变量是否存在

Angular 6 check for the existence of a variable with ngIf

loops

angular-ng-if

ngfor

angular6