6

这是使用 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) 返回未定义。

4

2 回答 2

1

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

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

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

于 2019-08-05T07:43:27.020 回答
1

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

this.golfDataService
  .getGolfData(id)
  .subscribe(data => {
    this.selectedCourse = data.data;
    console.log(data.data);
  });
setTimeout(() => console.log(this.selectedCourse), 2000);
于 2019-08-04T23:48:11.257 回答