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

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

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

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

<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);
  }
}