如何在AngularCLI中为特定元素绑定keyup事件？

嘿，这个问题我之前也碰到过，核心就是要让每个循环项的搜索状态和事件处理独立开来，我给你一步步拆解解决方案：

1. 给每个元素维护独立的状态 #

首先在组件类里定义两个变量：一个用来存储每个元素的搜索关键词，另一个标记当前激活的元素（也就是正在输入的那个）。用元素的唯一标识（比如elem.id）或者循环的index当键都可以，推荐用元素自身的id，因为index会随着数据集变化而改变，稳定性差一些。

组件代码示例：

export class YourComponent {
  dataset = [...]; // 你的原始数据集
  // 存储每个元素的搜索词，键是元素id或index
  searchTerms: { [key: string | number]: string } = {};
  // 标记当前激活的元素id/index
  activeElementId: string | number | null = null;

  customTrackBy(index: number, item: any): string | number {
    // 优先用item的唯一id，没有的话再用index
    return item.id || index;
  }
}

2. 修改模板，绑定独立的事件和状态 #

在*ngFor的模板里，给输入框绑定对应的搜索词，并且在keyup事件里传递当前元素的标识（id或index），这样就能精准定位到触发事件的元素。同时可以通过[class.active]给激活的元素加样式，直观区分。

模板代码示例：

<div *ngFor="let elem of dataset; trackBy: customTrackBy; let i = index">
  <!-- 用class标记激活状态 -->
  <div [class.active]="activeElementId === (elem.id || i)">
    <label for="positionCompanyName-{{elem.id || i}}">Company Name</label>
    <input 
      id="positionCompanyName-{{elem.id || i}}"
      type="text"
      <!-- 绑定当前元素的搜索词 -->
      [(ngModel)]="searchTerms[elem.id || i]"
      <!-- keyup事件传递当前元素的标识和搜索词 -->
      (keyup)="handleSearch(elem.id || i, searchTerms[elem.id || i])"
    >
    <!-- 这里展示当前元素的搜索结果，只针对这个elem处理 -->
    <div *ngIf="searchTerms[elem.id || i]">
      <!-- 比如过滤该元素的关联数据 -->
      <p>搜索结果：{{ getFilteredResults(elem, searchTerms[elem.id || i]) }}</p>
    </div>
  </div>
</div>

3. 实现独立的搜索逻辑 #

在组件的handleSearch方法里，我们就能拿到当前触发事件的元素标识，然后只处理这个元素的搜索逻辑，同时标记它为激活状态：

handleSearch(elementId: string | number, term: string): void {
  // 标记当前激活的元素
  this.activeElementId = elementId;
  // 这里写针对当前元素的搜索逻辑
  // 比如如果每个elem有自己的子数据集，就单独过滤这个子数据集
  // const currentElem = this.dataset.find(item => item.id === elementId);
  // 处理搜索...
}

// 示例：获取当前元素的过滤结果
getFilteredResults(elem: any, term: string): any[] {
  // 这里根据term过滤elem的相关数据，比如elem.subItems
  return elem.subItems?.filter(item => item.name.includes(term)) || [];
}

为什么这样能解决问题？ #

之前的问题是所有输入框共用同一个搜索函数和状态，导致触发时会影响所有元素。现在每个输入框的搜索词、激活状态都和自身的标识绑定，keyup事件只会传递当前元素的信息，自然就能区分开每个元素的操作了。

如果你的数据集里每个元素没有唯一id，用index也能临时解决，但记得如果数据集有增删操作，index会变化，这时候最好给每个元素生成一个稳定的唯一标识哦。

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