需要帮助数据绑定与 Observables 角度答案

【问题标题】：need help data binding with Observables in angular需要帮助数据绑定与 Observables 角度
【发布时间】：2019-12-12 12:27:51
【问题描述】：

这是使用 Observables 绑定数据的正确方法吗？如果是，我的代码还有什么问题导致 selectedCourse 变量等于未定义？

    this.golfDataService
      .getGolfData(id)
      .subscribe(data => {
        this.selectedCourse = data.data
        console.log(data.data)
      })
    setTimeout(function () { console.log(this.selectedCourse) }, 2000);
  }

我希望两个console.log语句返回相同的东西，但只有第一个console.log返回数据，这是一个包含高尔夫球场信息的对象，但console.log(this.selectedCourse)返回未定义。

【问题讨论】：

将其更改为setTimeout(() => { console.log(this.selectedCourse) }, 2000);，如果它足够快，它将返回正确的值。如果您使用函数，它将 this 重新绑定到该函数上下文而不是组件
你正在创建一个闭包和一个竞争条件，只是不是很好的做法，使用箭头函数并且不要依赖计时器

标签： javascript angular observable

【解决方案1】：

使用箭头功能。然后再次取决于 getGolfData 调用的速度，您“可能”得到记录的值。重点是，我们不应该尝试使用定时器来依赖获取数据，而是以事件驱动的方式开发代码。

this.golfDataService
  .getGolfData(id)
  .subscribe(data => {
    this.selectedCourse = data.data;
    console.log(data.data);
  });
setTimeout(() => console.log(this.selectedCourse), 2000);

【讨论】：

我没想到，非常感谢！我知道要避免使用计时器，这只是查看数据是否绑定的快速方法，再次感谢您！

【解决方案2】：

我建议您不要在组件逻辑中订阅Observable，除非您明确订阅unsubscribe()。

更好的方法（更少的代码、更少的复杂性、最佳性能）是使用 Angular 提供的async 管道。

 this.selectedCourse$ = this.golfDataService
      .getGolfData(id)
      .pipe(
        map(res => res.data),
        tap(x => console.log(x))
      );

然后在模板中：

<div *ngIf="selectedCourse$ | async as selectedCourse">
  Hello {{selectedCourse}}
</div>

这种方法有很多好处，例如更简洁的代码、避免内存泄漏、轻松迁移到OnPush 更改检测策略以及强大的 RxJS 使用。

【讨论】：