ionic4 @ionic/angular ionChange 或 ion-select 在表单重置时未按预期工作

Question

当前行为：我认为这是 angular 之前的一个问题，但 angular 使用 emitEvent:false 选项修复了它，现在在 ionic 中不起作用。我有一个反应式表单，当我想用重置重置表单时，即使使用 {emitEvent: false} 选项它也会发出一个事件，并且它运行 ionChange 如果选项 emitEvent:false 是不正确的行为。

预期行为：如果选项 emitEvent: false，ionChange 不能运行.

这是我的 .html 文件中的内容

 <ion-select slot="end" (ionChange)="onProvinceChanged($event)" formControlName="provinceCtrl" [interfaceOptions]="customPopoverOptions" interface="popover" placeholder="{{'province' | translate}}">
<ion-select-option *ngFor="let city of cities" [value]="city.id"> {{city.name | translate}} </ion-select-option> 
 </ion-select>

这就是我的 .ts 文件中的内容

onClearFilter(){ this.form.controls['provinceCtrl'].reset('',{emitEvent: false}); }

我当前的版本

Ionic CLI : 5.4.5 (C:\Users\AMD\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.11.3
@angular-devkit/build-angular : 0.803.3
@angular-devkit/schematics : 8.1.2
@angular/cli : 8.3.3
@ionic/angular-toolkit : 2.0.0

Answer 1

正如我在评论中提到的，ionChange 不关心值是如何设置或重置的，它不以任何方式附加到 angular 表单，它只是在值更改时监听并相应地采取行动，所以 emitEvent: false 在这种情况下不起作用，因为它只影响表格。

因此，因为它只影响表单，所以删除 ionChange 并改为监听该表单控件的 valueChanges，因为设置 emitEvent 时不会触发 valueChanges到 false:

this.form.get('provinceCtrl').valueChanges.subscribe((value: number) => {
  // do stuff!
})

另外记得在组件销毁时取消订阅！

ionic4 @ionic/angular ionChange 或 ion-select 在表单重置时未按预期工作

ionic4 @ionic/angular ionChange or ion-select not working as expected on form reset

ionic-framework

angular

ionic4