Angular中NgFor循环为元素设ID及条件创建元素的问题

嘿，我来帮你搞定这两个NgFor的问题，都是日常开发里经常碰到的场景，咱们一步步拆解：

1. 正确用索引生成外层div的动态ID #

你之前尝试的[attr.id]="element-i"没成功，是因为Angular把element-i当成了一个组件里的变量名，而不是字符串和索引的拼接。咱们需要明确把字符串和索引结合起来，有两种常用的写法：

写法一：属性绑定 + 字符串拼接 #

在NgFor循环里先声明索引变量let i = index，然后用字符串拼接的方式生成ID：

<div *ngFor="let item of yourDataArray; let i = index" [attr.id]="'element-' + i">
  <!-- 内层div内容 -->
</div>

写法二：插值语法 #

如果你觉得属性绑定的写法有点绕，也可以用更直观的插值语法：

<div *ngFor="let item of yourDataArray; let i = index" id="element-{{i}}">
  <!-- 内层div内容 -->
</div>

两种写法效果完全一样，选你看着舒服的就行。

2. 条件渲染特定内层div #

要实现“仅满足条件时创建某个内层div”，Angular的*ngIf指令就是干这个的。你只需要在目标内层div上加上*ngIf，并传入你的判断条件就行。

举个具体的例子：假设我们有一个JSON数组，每个元素里有个showThirdDiv的布尔值，只有当这个值为true时才显示第三个内层div；或者也可以基于元素的某个属性值、甚至索引来判断。

完整示例代码 #

组件类（.ts文件）

import { Component } from '@angular/core';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html'
})
export class ItemListComponent {
  // 模拟你的JSON数据
  dataItems = [
    { name: 'Item 1', price: 20, showExtra: false },
    { name: 'Item 2', price: 50, showExtra: true },
    { name: 'Item 3', price: 15, showExtra: false }
  ];
}

模板文件（.html文件）

<!-- 外层div：用索引生成动态ID -->
<div *ngFor="let item of dataItems; let i = index" [attr.id]="'element-' + i">
  <!-- 第一个内层div：总是显示 -->
  <div class="inner-div">
    <span>名称：{{ item.name }}</span>
  </div>
  <!-- 第二个内层div：总是显示 -->
  <div class="inner-div">
    <span>价格：{{ item.price }}元</span>
  </div>
  <!-- 第三个内层div：仅当showExtra为true时显示 -->
  <div class="inner-div" *ngIf="item.showExtra">
    <span>额外信息：这是一个特殊商品</span>
  </div>
</div>

你可以根据自己的实际需求修改*ngIf里的条件，比如改成item.price > 30（价格大于30时显示）、i % 2 === 0（偶数索引的元素显示）等等，完全灵活。

内容的提问来源于stack exchange，提问作者JennyToy