在聚焦之前,离子输入不会更新

时间:2017-12-21 08:13:29

标签: ionic-framework ionic2 ionic3 angular2-forms

我的表单与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();
        }
    });

从异步回调更新模型时,它不起作用。

有人能指出我正确的方向吗?

0 个答案:

没有答案