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;
  })
}

所以理想的做法是将错误处理保留在提供程序内部以及组件内，您的方法应轻巧。

只要您使用随附的现代HTTP模块在Angular 4.3+上运行，此示例就应该为您工作。

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

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

1 个答案: