如何在离子选择中获取所选项目的索引 [英] How to get Index of selected Item in ion-select

问题描述

我正在使用<ion-select>作为下拉列表，它按预期工作，但是我想要的是<ion-select>

I am using <ion-select> for drop-down list and it working as expected but what I want here is Index of selected option from <ion-select>

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

I have used <ion-select> and change event like below:

<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.
}

让我知道是否有什么可以帮助我！

let me know if any can help me on this!

谢谢.

推荐答案

在您的*ngFor中，您还可以定义一个变量来接收队列索引

In your *ngFor you can also define a variable to receive que index

<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文件中声明一个属性

The case here is that your declared index is inside your ion-select so it's not available for onSelectChange method. So declare a property in your .TS file

public myIndex: number = 0;

每当用户选择一个选项时，属性就会收到索引

And every time a user select an option the property will receive the index

<!-- 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的方法.希望这会有所帮助.

There's another options but this is the most Angular way of doing this. Hope this helps.

这篇关于如何在离子选择中获取所选项目的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！