如何使用*ngFor之外的索引访问数据

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

export class AppComponent {
  items = [
    { name: 'Item 1' },
    { name: 'Item 2' },
    // ...
  ];
  selectedIndex: number;

  selectItem(index: number) {
    this.selectedIndex = index;
    // 现在你可以使用this.selectedIndex来访问选中的项
    console.log(this.items[this.selectedIndex]);
  }
}

export class AppComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    // ...
  ];

  trackByFn(index: number, item: any): number {
    return item.id; // 返回唯一标识符
  }
}

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

selectItem(item: any) {
  const index = this.items.indexOf(item);
  console.log(index, item);
}

export class AppComponent {
  items = [
    { name: 'Item 1' },
    { name: 'Item 2' },
    // ...
  ];

  accessItemByIndex(index: number) {
    if (index >= 0 && index < this.items.length) {
      console.log(this.items[index]);
    } else {
      console.log('Index out of bounds');
    }
  }
}