Question

我正在开发应用程序 Web使用Angular2。我正在使用Firebase实时数据库。

对于实体'arbitro'，我实现了两个类：

arbitro.component.ts ，它管理实体和相关屏幕的逻辑

arbitro.service.ts ，它在数据库上执行操作。

在 service 类中，我实现了以下方法，该方法在数据库中参数的节点上执行 update ，并返回类型< strong> 承诺。

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

在 component 类（我称之为 update ）中，我实现了以下所示的方法。调用服务的 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 是arbitro.service.ts的实例。
promise 是组件类的属性。
checkEdited 是一个布尔属性，如果 Promise 抛出成功的响应，我想将其分配为true。

启动应用程序并执行 update 时，我在控制台中收到以下响应：

更新成功完成。

更新失败：TypeError：无法设置未定义的属性'checkEdited'

分析输出结果，我推断 update 已成功执行，问题在于将值分配给checkEdited。

由此，我对这个逻辑的操作和实现有两个疑问：

我在 component 类中管理 update 响应的方式是否正确？
如果正确， checkEdited 会出现什么错误，我该如何避免？

谢谢！

Answer 1

您遇到的问题是与this的绑定有关。在内部函数中，它引用不同的值。

您有以下三种选择：

使用箭头功能捕获周围的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);
});

如何在Promise中正确使用我的应用程序代码？

1 个答案: