代码之家  ›  专栏  ›  技术社区  ›  JennyToy

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

  •  2
  • JennyToy  · 技术社区  · 6 年前

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

    我想做两件事:

    1. 根据ngfor中的索引加上一些字符串,为外部div提供一个id。我无法使用

      [属性id]=“元素i”

    2. 如果元素具有给定键的值(见下文),则仅创建一个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>
    

    这在角5中可以实现吗?

    1 回复  |  直到 6 年前
        1
  •  2
  •   David    6 年前
    1. 如果不添加单引号,angular会尝试计算 element-i 表达式,该表达式无效

    试试这个

    <div *ngFor="let element of data; index as i" [attr.id]="'element-'+i">
    
    1. 使用*ngIf时,您不需要 {{ ,它需要一个表达式

    试试看

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