Angular 5中*ngFor循环内单条项布尔值独立切换方法咨询

这个问题很常见——用单个布尔变量控制所有循环项的显示/隐藏，自然会导致点击按钮时所有元素一起切换。咱们只需要给每个循环项绑定独立的状态变量，通过传递索引来定位要修改的项就行，具体步骤如下：

方案1：给列表项对象添加状态属性（推荐） #

如果你的列表数据是自定义类型，直接给每个对象加一个控制显示的属性是最直观的方式：

1. 调整数据结构（组件类） #

假设你原来的列表项类型是Product，先给它添加showMeasurements属性：

// 定义你的数据类型
interface Product {
  id: number;
  name: string;
  // 新增控制显示的布尔属性，初始默认隐藏
  showMeasurements: boolean;
}

// 组件类里的列表数据
products: Product[] = [
  { id: 1, name: "商品1", showMeasurements: false },
  { id: 2, name: "商品2", showMeasurements: false },
  // ...更多项
];

// 切换对应项的状态，接收当前项的索引
toggleMeasurements(index: number): void {
  this.products[index].showMeasurements = !this.products[index].showMeasurements;
  // 如果你用的是不可变数据（比如NgRx），记得创建新数组：
  // this.products = this.products.map((item, i) => 
  //   i === index ? {...item, showMeasurements: !item.showMeasurements} : item
  // );
}

2. 模板中绑定状态与事件 #

在*ngFor里获取索引，点击按钮时传递索引，显示条件绑定对应项的状态：

<div *ngFor="let product of products; let i = index">
  <h3>{{ product.name }}</h3>
  <button (click)="toggleMeasurements(i)">
    {{ product.showMeasurements ? '隐藏尺寸' : '显示尺寸' }}
  </button>
  <!-- 只有当前项的showMeasurements为true时才显示 -->
  <div *ngIf="product.showMeasurements" class="measurements">
    尺寸信息：XXX
  </div>
</div>

方案2：维护独立的状态数组（适合无法修改原数据的场景） #

如果不能修改原列表对象的结构，可以单独创建一个和列表长度一致的布尔数组，用来存每个项的显示状态：

1. 组件类中初始化状态数组 #

// 原列表数据（假设无法修改结构）
products: {id: number, name: string}[] = [
  { id: 1, name: "商品1" },
  { id: 2, name: "商品2" },
];

// 初始化状态数组，所有项默认隐藏
showMeasurementsStates: boolean[] = this.products.map(() => false);

toggleMeasurements(index: number): void {
  this.showMeasurementsStates[index] = !this.showMeasurementsStates[index];
}

2. 模板中绑定状态 #

<div *ngFor="let product of products; let i = index">
  <h3>{{ product.name }}</h3>
  <button (click)="toggleMeasurements(i)">
    {{ showMeasurementsStates[i] ? '隐藏尺寸' : '显示尺寸' }}
  </button>
  <div *ngIf="showMeasurementsStates[i]" class="measurements">
    尺寸信息：XXX
  </div>
</div>

关键原理 #

原来的问题出在单个布尔变量被所有循环项共享，点击时修改的是同一个变量，所以所有项都会同步切换。现在每个循环项对应自己的状态（要么是对象自身的属性，要么是状态数组中对应索引的值），通过传递索引就能精准定位到要修改的项，实现单独切换。

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