ngfor 在元素点击事件中使用索引

本文介绍了ngfor 在元素点击事件中使用索引的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我想在我的筹码上制作一个删除按钮，所以我尝试了:

I am trying to make a remove button on my chips so I tried:

<mat-chip-list>
  <mat-chip *ngFor="let condition of conditions; let i = index">
    {{condition.column.friendlyName}} {{condition.operator.symbol}} {{condition.value}} 
    <mat-icon class="close-icon" (click)="removeChip(i)">highlight_off</mat-icon>
  </mat-chip>
</mat-chip-list>

但它说 i 未定义.点击时获取筹码索引的正确方法是什么?

but it says i is not defined. What is correct way to get the chips index when it is clicked?

推荐答案

this is updated in angular 5+ to index as i:

this is updated in angular 5+ to index as i:

<mat-chip *ngFor="let condition of conditions; index as i"> 
  {{condition.column.friendlyName}} {{condition.operator.symbol}} {{condition.value}} 
  <mat-icon class="close-icon" (click)="removeChip(i)">highlight_off</mat-icon>
</mat-chip>

这篇关于ngfor 在元素点击事件中使用索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！