从提供者承诺返回后，离子视图未更新

Question

我对 Ionic 和 JS 编程很陌生，所以请原谅我的无知。我已经能够从我设置的其他 REST 提供程序获取数据，并且更新的值可以正常显示。几乎从其他一些工作功能中复制了代码。这一次，无论我怎么尝试，都不会更新。

提供者：

return new Promise(resolve => {

this.http.post(this.apiUrl)
  .subscribe(res => {
     resolve(res);
  },
  (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
            this.error = {"text":"App error occured."};
            console.log('Client-side error occured.');
        } else {
            this.error = {"text":"Cloud server error occured."};
            console.log('Cloud server error occured:'+err);
        }
        return this.error;
});
});
}

HTML：

    <ion-item>
      <ion-label stacked>Make</ion-label>
      {{vesselData?.make}}
    </ion-item>

功能：

vesselData = {"make":""};
updateVesselInfo() {

  const data = JSON.parse(localStorage.getItem('userData'));

  this.vesselProvider.getVesselData(data.userData.sim).then(vData => {
      this.vesselData = vData;
  }).catch(console.log.bind(console));
}, (err) => {
  console.log("Vessel: ".err);
});

如果我在 .then() 中记录从提供程序返回的数据，则表明提供程序返回了正确的数据。但是，它不会更新任何vesselData 变量。知道我哪里出错了吗？

Answer 1

所以现代的方法是在你的提供者中提供返回 Observable 的方法，然后在你的组件中调用这个方法并订阅它来获取数据：

在您的提供商中：

getVesselData() {
    return this.http.post(this.apiUrl)
        .pipe(
            catchError(this.yourErrorHandlerInsideProviderHere)
        )
}

现在在您的组件中：

vesselData = {"make":""};

updateVesselInfo() {

  this.provider.getVesselData().subscribe( vesselData => {
      this.vesselData = vesselData;
  })
}

理想的做法是在提供程序内部和组件内部保持错误处理，您的方法应该是轻量级的。

只要您使用 Angular 4.3+ 并使用随附的现代 HTTP 模块，此示例应该适合您。

更新： 请确保您正确绑定到模板。这是示例： https://stackblitz.com/edit/ionic-wqrnl4 我跳过了其余调用（http），但原理是一样的。