Question

所以我知道如何使用ionChange事件获取选定的值，但是如何获取选定的索引。例如，如果我要在下拉列表中选择第3个值，那么如何获取所选的索引（2）而不是所选的值？

Answer 1

您可以执行以下操作：-

<ion-select placeholder="Select One">
      <ion-select-option value="id1">Value1</ion-select-option>
      <ion-select-option value="id2">Value2</ion-select-option>
</ion-select>

通过此操作，当您选择任何特定选项时，然后在其更改事件上，您将获得该对象的ID而不是控制器中的值。

希望对您有帮助。

Answer 2

这是您可以获取ID的方法。将局部变量添加到您的离子选择 #selectedIndex 中。像这样添加您的值后 [value] = [prices.w，id]

<ion-select slot="end" (ionChange)="changePrice($event)" #selectIndex>
  <ion-select-option text-uppercase [value]="[prices.w, id]" *ngFor="let prices of prodData?.prices; let id = index" >{{prices.w}}</ion-select-option>
</ion-select>

在您的ts中。导入ViewChild

import { Component, OnInit, ViewChild } from '@angular/core';

引用本地变量后

@ViewChild('selectIndex') selectedId: ElementRef;

然后声明您的 ionChange（）函数 changePrice（event）并添加以下代码

public changePrice(event) {
const childCount = this.selectedId['el']['childElementCount'];
this.selectedId['el']['childNodes'][`${childCount}`]['defaultValue'] = event.detail.value[0];
this.selectedId['el']['shadowRoot']['children'][1]['innerHTML'] = event.detail.value[0];
this.selectedId['el']['shadowRoot']['children'][1]['innerText'] = event.detail.value[0];
console.log(event.detail.value[1]);
}

记录您的索引

console.log(event.detail.value[1]);

希望它能正常工作

离子（ionChange）获得所选索引

2 个答案: