Ионный вид не обновляется после возврата от обещания провайдера

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), но принцип тот же.