Ionic 是否可以在不改变模型的情况下触发离子选择改变?

fd3cxomn  于 2022-12-08  发布在  Ionic
关注(0)|答案(4)|浏览(172)

我在一个虚拟组件中有一个简单的ion-select

<ion-select
      [value]="objectConfig!.soundType"
      interface="popover"
      (ionChange)="newSoundType.emit($event)"
    >
      <ng-container *ngFor="let soundType of SoundTypesArray">
        <ion-select-option [value]="soundType" id="soundType-{soundType}">
          {{ soundType  }}
        </ion-select-option>
      </ng-container>
    </ion-select>



/// model:
@Input() objectConfig: ObjectConfig

它只有一个作业。请告诉我用户何时选择了另一个SoundTypesoundTypeAsoundTypeBsoundTypeC,其中soundTypeC要求用户执行更多步骤或仅取消)。
我现在遇到的问题是,当用户选择soundTypeC并取消时,<ion-select>框会继续显示soundTypeC作为选定值,而不是之前的值,即使objectConfig仍将soundTypeA作为soundType值。
我知道我可以从我的父组件重新发送input(),但我正在尝试防止重绘。是否可以防止ion-select更改自己的值,并尊重这-〉[value]="objectConfig!.soundType"

编辑:

澄清一下:objectConfig持有正确的值。我需要ion-select来反映objectConfig.soundType所说的内容。
将 Package 盒中的香蕉([()])与valuengModel一起使用不起作用。

编辑2堆栈 lightning 战:https://stackblitz.com/edit/ionic-select-problem?file=pages%2Fhome%2Fhome.ts
**Edit 3 Stackblitz:**使用carlosGlegaspi answer时,离子选择的外部显示值是正确的,但内部ion-select仍保留更改后的值

jv4diomz

jv4diomz1#

您可以使用selectedText属性,胁迫ion-select显示configObject的值。
在示例HTML中:

<ion-select
      [ngModel]="configObject.soundType"
      [selectedText]="configObject.soundType"
      interface="popover"
      (ionChange)="newSoundType($event)"
    >

Stackblitz link

yqyhoc1h

yqyhoc1h2#

Using carlosGlegaspi answer as base I managed to fix this although it feels like a hack.
instead of send directly an event I call a function first and I also send a reference to ion-select :

<ion-label>Sound Type</ion-label>
            <ion-select
          #ionSelect
      [ngModel]="configObject.soundType"
      [selectedText]="configObject.soundType"
      interface="popover"
      (ionChange)="newSoundType($event, ionSelect)"
    >

Then in the function I send the event but also reset the value of ionSelect

public emitNewSoundType(event: CustomEvent<IonSelect>, element: IonSelect): void {
    if (this.trainingConfig) {
      element.value = this.configObject.soundType;
    }
    this.newSoundType.emit(event);
  }

stackblitz with an example (using ionic3 because I could not bring ionic 4 to work with stackblitz) https://stackblitz.com/edit/ionic-select-problem-solution?file=pages%2Fhome%2Fhome.ts

scyqe7ek

scyqe7ek3#

objectConfig仍保留旧值,因为您尚未设置双向绑定,即[(value)]="objectConfig!.soundType"

laawzig2

laawzig24#

<ion-select
   [value]="order.order_status"
   [interface]="'popover'"
   (ionChange)="onStatusChange($event)"
>

...

onStatusChange($event) {

   ...your condition here...

   ...cancel like this...
   const temp = this.order.order_status;
   this.order.order_status = null;
   setTimeout( () => {
       this.order.order_status = temp;
   }, 200);

虽然很简陋但很管用。
离子4

相关问题