是否可以在不更改模型的情况下触发 ion-select 更改？

Question

我在虚拟组件中有一个简单的 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

它只有一份工作。当用户 select 编辑了另一个 SoundType（soundTypeA、soundTypeB 和 soundTypeC 时告诉我，其中 soundTypeC 需要用户执行更多步骤或只是取消).

我现在遇到的问题是，当用户选择 soundTypeC 并取消 <ion-select> 框时，会继续显示 soundTypeC 作为 selected 值而不是上一个，即使 objectConfig 仍然保持 soundTypeA 作为 soundType 值。

我知道我可以从我的父组件重新发送 input()，但我试图防止重绘。是否有可能阻止 ion-select 改变自己的价值并尊重这一点 -> [value]="objectConfig!.soundType" ?

编辑：

澄清一下：objectConfig 持有 正确的 值。我需要 ion-select 来反映 objectConfig.soundType 所说的内容。

用value或ngModel盒子里的香蕉([()])无效。

Edit2 Stackblitz: https://stackblitz.com/edit/ionic-select-problem?file=pages%2Fhome%2Fhome.ts

Edit3 Stackblitz: 使用离子的外部显示值-select 是正确的，但内部 ion-select 仍然保持更改后的值

Answer 1

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

Answer 2

您可以使用 selectedText property.

强制 ion-select 显示 configObject 的值

在你的例子中HTML:

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

Stackblitz link

Answer 3

使用作为基础，我设法解决了这个问题，尽管它感觉像是一个 hack。

我没有直接发送事件，而是先调用一个函数，然后我还发送了对 ion-select:

的引用

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

然后在我发送事件的函数中还重置了 ionSelect

的值

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

stackblitz 示例（使用 ionic3，因为我无法将 ionic 4 用于 stackblitz）https://stackblitz.com/edit/ionic-select-problem-solution?file=pages%2Fhome%2Fhome.ts

是否可以在不更改模型的情况下触发 ion-select 更改？

Is it possible to trigger an ion-select change without changing the model?

ionic-framework

angular

ionic4