Как правильно работать с кодом моего приложения в рамках Promise?

Question

Я занимаюсь разработкой веб-приложения с использованием Angular2.Я использую базу данных Firebase Realtime.

Для сущности 'арбитро' я реализовал два класса:

bitro.component.ts , который управляет логикой сущности и связанным с ней экраном

bitro.service.ts , который выполняет операции с базой данных.

В службе class, я реализовал следующий метод, который выполняет update на узле параметра в базе данных и возвращает элемент типа Promise .

editArbitro(arbitro: Arbitro) {
    return this.items.update(arbitro.id, arbitro);
  }

В классе component (откуда я называю update ) я реализовал метод, показанный ниже. обновление службы вызывается, и затем я работаю с возвращенным Promise , используя затем и предложения catch .

this.promise = this.arbitroSvc.editArbitro(this.arbitro);
        this.promise.then(function () {
          console.log('Update completed successfully');
          this.checkEdited = true;
        }).catch(function (error) {
          console.log('Update failed: ' + error);
          });

• ArbitroSvc является экземпляромbitro.service.ts.
• обещание является атрибутом класса компонента.
• checkEdited является логическим атрибутом, который я хочу присвоить true, если выбрасывает Promise успешный ответ.

Когда я запускаю приложение и выполняю обновление , я получаю следующий ответ в консоли:

Обновление успешно завершено.

Обновление не удалось: Ошибка типа: невозможно установить свойство 'checkEdited' из неопределенного

Анализируя вывод, я делаю вывод, что обновление было выполнено успешно, ипроблема в присвоении значения checkEdited.

Из этого у меня есть два вопроса о работеn и реализация этой логики:

• Правильно ли мне управлять ответом update в моем классе component ?
• Если этоправильно, что я получаю об ошибке checkEdited и как ее избежать?

Спасибо!

Answer 1

Проблема, с которой вы сталкиваетесь, связана с привязкой this.Внутри внутренней функции это относится к другому значению.

У вас есть три варианта:

1. Используйте функцию стрелки, которая захватывает окружающие this:

this.promise = this.arbitroSvc.editArbitro(this.arbitro);
this.promise.then(() => {
    console.log('Update completed successfully');
    this.checkEdited = true;
}).catch(function (error) {
    console.log('Update failed: ' + error);
});

Назначить this временной переменной (например, self):

let self = this;
this.promise = this.arbitroSvc.editArbitro(this.arbitro);
this.promise.then(() => {
    console.log('Update completed successfully');
    self.checkEdited = true;
}).catch(function (error) {
    console.log('Update failed: ' + error);
});

Привязка внутренней функции:

this.promise = this.arbitroSvc.editArbitro(this.arbitro);
this.promise.then(() => {
    console.log('Update completed successfully');
    this.checkEdited = true;
}.bind(this)).catch(function (error) {
    console.log('Update failed: ' + error);
});