代码之家 › 专栏 › 技术社区 › rhysclay

离子(离子变化)获取选定索引

ionic4 ionic-framework

0

rhysclay · 技术社区 · 6 年前

因此,我知道如何使用ionchange事件获取所选值,但如何获取所选索引。例如,如果我要在下拉列表中选择第三个值,如何获取选定的索引(2),而不是选定的值?

1 回复 | 直到 6 年前

1

2

Sunny Parekh 6 年前

你可以这样做:

<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,而不是控制器中的值。

我希望有帮助。

2

0

Code Mickey 6 年前

这是获取id的方法。在ion select中添加一个局部变量 #选定索引 . 在这样增加你的价值之后 [值]=[价格.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.import视图中

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

引用局部变量后

@ViewChild('selectIndex') selectedId: ElementRef;

然后宣布 离子变换() 功能 变更价格(事件) 并添加以下代码

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]);

希望工作顺利