Question

我从可观察的数据中获取数据，然后对其进行处理。

我的实际问题是，当我调用可观察的数据时，永远无法到达。

但是当我在subscribe()方法中使用console.log结果时，数据马上出现了。

我以为Angular在获取数据时会再次调用生命周期钩子，但事实并非如此。

refreshData() {

  this.apiService.retrieveIndicatorHistory(this.indicatorName, this.currentPeriod).subscribe(res => {
    this.values$.push(res);
    console.log("values",res)
  });
}

ngOnInit() {
  this.refreshData();
  ... few steps after
  console.log("values are here", this.values$); // always empty
}

然后我也尝试在Onchange中显示值，但数据从不打印

ngOnChanges() {
  console.log("values are here", this.values$);
  // manipulate data
}

如何准备好从可观察值中获得的值？我是否应该将所有业务逻辑放入subscribe()中？

Answer 1

RxJS Observable以异步方式工作，在接收到数据后将发出一次数据。因此输入和输出将是可观察的。为了读取可观察的数据，首先需要订阅它。

refreshData() {

  this.apiService.retrieveIndicatorHistory(this.indicatorName, this.currentPeriod).subscribe(res => {
    this.values$.push(res);
    this.processData();
  });
}

ngOnInit() {
  this.refreshData();
}

processData(){
  console.log(this.values$); // you can access data here.
}

Answer 2

您不应将业务逻辑放入订阅中。通常，所有业务逻辑都应放在pipe（）中。您可以使用异步管道在hTML中直接订阅可观察的内容。

因此在html中应该是：

 <ul *ngFor="let value of (values$ | async)">
  <li>{{value}}</li>
 </ul>

和component.ts内部：

values = []
values$ = this.apiService.retrieveIndicatorHistory(this.indicatorName, this.currentPeriod).pipe(
  map(res => {
    this.values.push(res);
    return this.values
  })
)

Answer 3

是的，这是一个异步调用，并且订阅将在数据到达时及时准确地知道，ngOnInit中的任何内容都将执行并且不会等待它。

否则，您可以使用（异步，等待）组合

准备好后，使用可观察的角度值

3 个答案: