Angular 如何通过循环动态调用函数？

我真的不知道该如何表达我的问题，因为我对通用的爱奥尼亚和混合应用程序开发还很陌生，但我会尽我最大的努力。我正在开发一个应用程序，想通过点击另一个按钮打开一个

ion select

字段

它在某种程度上起作用，但如果单击的条目不是第一个条目，则不会删除正确的条目

我的HTML代码如下所示：

account.page.html

{{item.description}}
{{item.score}

洛申
贝尔贝滕

这是到目前为止我的打字稿：

account.page.ts

从'@angular/core'导入{Component，OnInit，ViewChild}；
从“../../services/drop.service”导入{DropService}；
从'@ionic/angular'导入{Events，IonSelect，NavController}；
从'@ionic/angular'导入{AlertController}；
@组成部分({
选择器：“应用程序帐户”，
templateUrl:“./account.page.html”，
样式URL:['./account.page.scss']，
})
导出类AccountPage实现OnInit{
allDrops:Drop[]；
myDrops:Drop[]；
@ViewChild（'showSelect'）selectRef:IonSelect；
openSelect（）{
此参数为.selectRef.open（）；
}
构造函数（专用dropService:dropService，
公共navCtrl:NavController，
公共事件：事件，
公共alertController:alertController{}
恩戈尼尼特（）{
this.dropService.getDrops（）.subscribe（res=>{
this.allDrops=res；
});
this.dropService.getMyDrops（）.subscribe（res=>{
this.myDrops=res；
});
}
showMore（项目、事件）{
如果（event.detail.value==='delete'）{
本.确认删除（项目）；
}
}
异步确认删除（项目）{
const alert=等待this.alertController.create({
标题：“确认”，
消息：“删除？”，
按钮：[
{
文本：“取消”，
角色：“取消”，
cssClass:“二级”
}, {
文本：“删除”，
处理程序：（）=>{
this.dropService.removeDrop（item.id）；
}
}
]
});
等待警报。当前（）；
}
}

我想我需要使每个

ion select

唯一，如下所示：

import { Component, OnInit, ViewChildren, QueryList } from '@angular/core';
import { DropService } from '../../services/drop.service';
import { Events, IonSelect, NavController } from '@ionic/angular';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-account',
  templateUrl: './account.page.html',
  styleUrls: ['./account.page.scss'],
})
export class AccountPage implements OnInit {

  // Now it's a QueryList of IonSelect instances
  @ViewChildren('showSelect') selectRefs: QueryList<IonSelect>;

  // This is the list of all the items that you use in the ngFor
  public allItems: Array<any>;

  openSelect(item: any) {

    // First find the index of the item in the allItems array
    const targetIndex = allItems.findIndex(someItem => someItem.id === item.id);

    if(targetIndex > -1) {

      // then get the IonSelect from the QueryList using the same index
      const targetIonSelect = this.selectRefs.toArray()[targetIndex];

      if(targetIonSelect) {

        // Now you can open that IonSelect instance
        targetIonSelect.open();

      }

    }

  }

  // ...

}

---

但不幸的是，我不知道实现这一点的正确语法。。如果我猜错了，有人能帮我或纠正我吗？

据我所知，您的页面中有几个

ion select

组件，您需要获得某个

ion select

的引用才能从代码中打开它

我假设

ionselect

组件位于

*ngFor

<div *ngFor="let item of allItems" class="some-class">

  <!-- Some other content... -->

  <!-- Send the item to the openSelect() method -->
  <ion-icon name="more" class="edit-icon" (click)="openSelect(item)"></ion-icon>

  <ion-select (ionChange)="showMore(item, $event)" #showSelect>
    <!-- options... -->
  </ion-select>

</div>

---

我们可以看看你的模板中是如何定义

项的吗？还有多个
离子选择
？我编辑了HTML部分。是的，很抱歉忘记将循环添加到html部分。@Brecherchef在您编辑html代码之前，我已经添加了一个答案，但主要思想完全相同。你不用
allItems
而是使用
myDrops
数组。我试过这个。我将编辑问题中的代码，以便您可以看到我的调整。到目前为止，它对我不起作用，我的控制台抛出了以下错误：
错误类型错误：无法读取未定义的属性“id”
@Brecherchef您是否在HTML代码中的
openSelect（）
方法中发送项目：
？Ou whups。你是我的坏蛋。非常感谢你，这个对我很有用！很高兴听到这个消息：）