Question

这是使用Observable绑定数据的正确方法吗？如果是，那么我的代码又有什么问题呢，使selectedCourse变量等于undefined？

    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）返回未定义。 / p>

Answer 1

使用箭头功能。然后再次根据getGolfData调用的速度，“可能”获取记录的值。关键是，我们不应该尝试使用计时器来获取数据，而是以事件驱动的方式开发代码。

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

Answer 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的强大用法。

需要帮助与Observables进行数据绑定

2 个答案: