如何在 ion-select 中获取 selected 项目的索引

Question

我正在使用 <ion-select> 作为下拉列表，它按预期工作，但我在这里想要的是 Index <ion-select>[ 中所选选项的 Index =16=]

我使用了 <ion-select> 并更改了如下事件：

<ion-select class="myCustomSelect" [(ngModel)]="selectedProductDD" interface="popover" (ionChange)="onSelectChange($event)">
    <ion-option *ngFor="let selectedProduct of productArray" [value] = selectedProduct.pid>{{ selectedProduct.pid }} </ion-option>
</ion-select>

更改事件：

onSelectChange(selectedValue: any) {
   //Here I want Index also.
   //Currently I am getting selected Value.
}

让我知道是否可以帮助我！

提前致谢。

Answer 1

在你的*ngFor中你也可以定义一个变量来接收查询索引

<ion-select class="myCustomSelect" [(ngModel)]="selectedProductDD" interface="popover" (ionChange)="onSelectChange($event)">
  <!-- you can also have your index by declaring a variable in ngFor that'll receive the index -->
  <ion-option *ngFor="let selectedProduct of productArray; let i = index" [value] = selectedProduct.pid>{{ selectedProduct.pid }} </ion-option>
</ion-select>

这里的情况是您声明的索引在您的 ion-select 中，因此它不适用于 onSelectChange 方法。所以在你的 .TS 文件中声明一个属性

public myIndex: number = 0;

并且每次用户 select 一个选项属性都会收到索引

<!-- on selecting an option your myIndex will receive the current selected option index -->
<ion-option *ngFor="let selectedProduct of productArray; let i = index" [value]=selectedProduct.pid (ionSelect)="myIndex = i">{{ selectedProduct.pid }}</ion-option>

然后你就可以在你的onSelectChange()

中使用它了

onSelectChange(selectedValue: any) {
  let index = this.myIndex;
}

还有其他选择，但这是最 Angular 的方法。希望这有帮助。

如何在 ion-select 中获取 selected 项目的索引

How to get Index of selected Item in ion-select

ionic2

ion-select