如何将id添加到ngfor中的元素以及在ngfor中有条件地创建元素

Question

我想使用 ngfor 为循环中的每个元素构建一个 div，其中有 3 个内部 div。这三个内部 div 各有一个 span，显示元素中的一些文本（元素只是一系列 json 键值对，每个 span 的内容是给定键的值).

我想做两件事：

根据 ngfor 中的索引加上一些字符串，给外部 div 一个 id。我无法使用
让它工作（见下文）
[attr.id]="element-i"
如果元素具有给定键（见下文）的值，则仅创建 div 之一

*ngIf="{{element.key3!=null}}"

这是我的代码尝试

  <div *ngFor="let element of data; index as i" [attr.id]="element-i">
      <div><span><b>Element number {{element.key1}}</b></span></div>
      <div><span><b>Elmenent value 2:</b>{{element.key2}}</span></div>         
      <div *ngIf="{{element.key3!=null}}"><span><b>Element value 3:</b>{{element.key3}}</span></div>
   </div>

这可以在 angular 5 中完成吗？

Answer 1

如果您不添加单引号，angular 会尝试计算无效的 element-i 表达式

试试这个

<div *ngFor="let element of data; index as i" [attr.id]="'element-'+i">

当使用 *ngIf 时，您不需要 {{，它需要一个表达式

试试看

<div *ngIf="element.key3!=null"><span><b>Element value 3:</b>{{element.key3}}</span></div>

如何将id添加到ngfor中的元素以及在ngfor中有条件地创建元素

How to add id to element in ngfor and conditional creation of element in ngfor

html

css

angular-ng-if

ngfor

angular