Accordion循环内输入框keyup事件自动计算面积问题求助

之前用索引取值的方法在普通div里有效，但在循环的Accordion面板里失效，核心原因是Accordion可能存在DOM渲染上下文变化，导致索引和实际item不匹配。直接传递当前item实例是最可靠的解决方式，以下是两种可行方案：

方案1：通过keyup事件传递当前item #

修改模板，把循环中的item直接传给计算函数，不用依赖索引：

<div class="accordion">
  <!-- 假设你是用*ngFor循环生成面板，这里补上遍历逻辑 -->
  <div class="accordion-content" *ngFor="let item of polygonItems">
    <div>
      length
      <input [(ngModel)]="item.length" (keyup)="calculateArea(item)" />
    </div>
    <div>
      breadth
      <input [(ngModel)]="item.breadth" (keyup)="calculateArea(item)" />
    </div>
    <div>area <input [(ngModel)]="item.area" readonly /></div>
  </div>
</div>

组件里实现计算函数：

calculateArea(item: any) {
  // 处理空值、非数字的情况，避免NaN
  const length = parseFloat(item.length) || 0;
  const breadth = parseFloat(item.breadth) || 0;
  // 计算面积，按需保留小数位数
  item.area = (length * breadth).toFixed(2);
}

方案2：用ngModelChange替代keyup（更精准） #

ngModelChange会在模型值真正变化时触发，比keyup更适配表单输入场景（比如粘贴、右键输入等）：

<div class="accordion">
  <div class="accordion-content" *ngFor="let item of polygonItems">
    <div>
      length
      <input [(ngModel)]="item.length" (ngModelChange)="calculateArea(item)" />
    </div>
    <div>
      breadth
      <input [(ngModel)]="item.breadth" (ngModelChange)="calculateArea(item)" />
    </div>
    <div>area <input [(ngModel)]="item.area" readonly /></div>
  </div>
</div>

计算函数和方案1完全一致，这样不管Accordion面板折叠/展开导致DOM变化，只要当前item的引用正确，就能准确计算并更新面积。

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