Angular组件异常：点击按钮显示相同描述而非对应元素专属描述

1. 所有元素显示相同描述的问题 #

你当前模板里用的{{ description }}是全局变量，所有元素共享同一个值，自然会显示相同内容。要显示每个元素的专属描述，需要绑定到当前循环元素的description属性：

修改模板中的描述部分：

<!-- 原代码 -->
<p *ngIf="isDisplay[i]">{{ description }}</p>
<!-- 修改后 -->
<p *ngIf="isDisplay[i]">{{ element.description }}</p>

确保你的MyArray类型定义包含description字段，每个element对象都有自己的专属描述值。

2. 状态数组同步问题 #

当前isDisplay数组未和elements数组长度同步，导致新增元素或初始加载时状态对应关系混乱。需要保证两个数组长度始终一致：

修正组件代码： #

export class myComponent {
  elements: MyArray[] = [];
  isDisplay: boolean[] = [];

  // 假设在初始化时加载元素
  ngOnInit() {
    this.loadInitialElements();
  }

  // 加载初始元素的方法
  loadInitialElements() {
    // 替换为你的实际数据获取逻辑
    this.elements = [
      { range: "范围1", description: "元素1的专属描述" },
      { range: "范围2", description: "元素2的专属描述" }
    ];
    // 初始化状态数组，所有元素默认隐藏描述
    this.isDisplay = new Array(this.elements.length).fill(false);
  }

  showDesc(index: number) {
    this.isDisplay[index] = !this.isDisplay[index];
  }

  loadElements() {
    // 模拟加载更多元素
    const newElements = [
      { range: "新增范围1", description: "新增元素1的专属描述" },
      { range: "新增范围2", description: "新增元素2的专属描述" }
    ];
    this.elements.push(...newElements);
    // 同步扩展状态数组，新增元素默认隐藏
    this.isDisplay.push(...new Array(newElements.length).fill(false));
  }
}

修正后的完整模板： #

<div *ngFor="let element of elements; let i = index">
  <div>
    <span>{{ element.range }}</span>
    <button (click)="showDesc(i)">Show element description</button>
    <p *ngIf="isDisplay[i]">{{ element.description }}</p>
  </div>
</div>

<div>
  <span *ngIf="elements.length > 1">
    <button (click)="loadElements()">load more elements</button>
  </span>
</div>

这样修改后，每个元素点击按钮只会切换自身的描述显示状态，且展示的是该元素的专属描述，状态数组也会和元素列表保持同步。

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