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

Posted 2023-03-13

【中文标题】如何在 ngfor 中向元素添加 id 以及在 ngfor 中条件创建元素

【英文标题】：How to add id to element in ngfor and conditional creation of element in ngfor

【发布时间】：2018-09-09 13:21:35

【问题描述】：

我想使用 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 中做到吗？

【参考方案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>