我的表单与NgModel
的模型相关联,如下所示:
<form #orderForm="ngForm" (ngSubmit)="onSubmit(orderForm)">
<ion-list class="contact_view">
<ion-item>
<ion-label stacked>{{ 'ADDRESS_LINE_1' | translate }}</ion-label>
<ion-input type="text" required placeholder="{{ 'ADDRESS_LINE_1_PLACEHOLDER' | translate }}" clearInput="true" name="addressLineOne" [(ngModel)]="order.addressLineOne"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>{{ 'ADDRESS_LINE_2' | translate }}</ion-label>
<ion-input type="text" placeholder="{{ 'ADDRESS_LINE_2_PLACEHOLDER' | translate }}" clearInput="true" name="addressLineTwo" [(ngModel)]="order.addressLineTwo"></ion-input>
</ion-item>
....
....
....
</ion-list>
</form>
当我将它用作从视图到模型的一个方向绑定时,这对我来说效果很好。
现在,我希望能够从代码更新输入值,如下所示:
ionViewDidEnter() {
// attempt to load order from memory
this.storageService
.get<Order>(StorageKeys.ShippingDetails)
.then(order => {
// if order was loaded
if (order) {
// test
this.order.addressLineOne = "aaaa"; // test
// update UI components
//this.changeDetectorRef.markForCheck(); // not working
//this.changeDetectorRef.detectChanges(); // not working
// run inside ngZone to update UI
//this.ngZone.run(() => {
// init order from memory
//this.order.addressLineOne = "bbbb"; // not working
// });
}
});
}
只有在其中一个输入被聚焦时才会更新AddressLineOne
。
我尝试changeDetectorRef.markForCheck()
,detectChanges()
并在ngZone
内运行 - 但不是那些有效的。
// THIS LINE WORKS
this.order.addressLineOne = "aaba";
this.storageService
.get<Order>(StorageKeys.ShippingDetails)
.then(order => {
// if order was loaded
if (order) {
// THIS LINE DOESN"T WORK
this.order.addressLineTwo = "aaaa";
// update UI components
this.changeDetectorRef.markForCheck();
}
});
从异步回调更新模型时,它不起作用。
有人能指出我正确的方向吗?