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

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

它只有一项工作。告诉我用户何时选择了另一个SoundType（soundTypeA、soundTypeB 和soundTypeC，其中soundTypeC 要求用户执行更多步骤或只是取消）。

我现在遇到的问题是，当用户选择soundTypeC 并取消<ion-select> 框时，即使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： 使用carlosGlegaspi answer 离子选择的外部显示值是正确的，但内部ion-select 仍然保持更改后的值

Answer 1

您可以通过使用selectedText property 强制 ion-select 显示 configObject 的值。

在您的示例 HTML 中：

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

Stackblitz link

Answer 2

使用carlosGlegaspi answer 作为基础，我设法解决了这个问题，尽管它感觉像是一个 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

Answer 3

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