在运行两次的ngfor循环上单击event。角度

在Angular中，*ngFor是一个结构型指令，用于在模板中根据数据集合渲染一组元素。当你在*ngFor循环上绑定点击事件时，可能会遇到一些问题，比如事件绑定不正确或者事件处理函数无法获取正确的上下文。

基础概念

*ngFor：Angular的结构型指令，用于遍历数组并为每个元素创建一个新的模板实例。
点击事件：通常使用(click)来绑定点击事件，它会在用户点击元素时触发。

类型

*ngFor可以遍历任何类型的数组。
点击事件可以绑定到任何HTML元素上。

应用场景

列表展示：如商品列表、用户列表等。
交互式元素：如按钮、链接等需要响应点击事件的元素。

常见问题及解决方法

问题1：点击事件未触发

原因：可能是由于事件绑定语法错误或者事件处理函数未正确定义。

解决方法：

确保事件绑定语法正确，例如：

<ul>
  <li *ngFor="let item of items; let i = index" (click)="handleClick(item, i)">
    {{ item.name }}
  </li>
</ul>

确保在组件类中定义了handleClick方法：

handleClick(item: any, index: number) {
  console.log('Clicked item:', item, 'at index:', index);
}

问题2：点击事件触发多次

原因：如果*ngFor循环中的每个元素都绑定了点击事件，那么每次点击都会触发所有元素的事件处理函数。

解决方法：

确保事件处理函数只在需要的元素上触发。如果需要，可以使用trackBy函数来优化性能并避免重复绑定事件。

trackByFn(index: number, item: any): number {
  return item.id; // 假设每个item都有一个唯一的id
}

然后在*ngFor中使用trackBy：

<ul>
  <li *ngFor="let item of items; let i = index; trackBy: trackByFn" (click)="handleClick(item, i)">
    {{ item.name }}
  </li>
</ul>

示例代码

<!-- app.component.html -->
<ul>
  <li *ngFor="let item of items; let i = index; trackBy: trackByFn" (click)="handleClick(item, i)">
    {{ item.name }}
  </li>
</ul>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  trackByFn(index: number, item: any): number {
    return item.id;
  }

  handleClick(item: any, index: number) {
    console.log('Clicked item:', item, 'at index:', index);
  }
}