订阅 observable returns undefined

Question

我使用一个服务来用来自后端的数据填充我的可观察对象。后端正在传递正确的数据。现在我想获取 observable 的值并构建一个饼图。

部分代码如下所示：

this.dataSet = this.dataService.getData(this.id);
this.dataSet.subscribe(
x => this.rightData = x.rightCount,
x => this.wrongData = x.wrongCount,
);
console.log('First value: '+ this.rightData);
console.log('Second value: '+ this.wrongData);
this.pieChartData = [this.rightData, this.wrongData];

它不起作用，控制台输出为：

First Value: undefined
Second Value: undefined

但是当我将代码更改为以下内容时，控制台日志显示正确的数据：

this.dataSet = this.dataService.getData(this.id);
this.dataSet.subscribe( 
x => console.log(x.rightCount),
x => console.log(x,wrongCount),
);

输出：

3
7

附加代码：

export interface Counter {
  rightCount: number;
  wrongCount: number;
}

dataSet: Observable<Counter> = of();

服务看起来像：

getData(id: number): Observable<Counter> {
    return this.http.get<Counter>(`/backend/getData?id=${id}`);
  }

firefox 日志显示我，后端 returns:

{"rightCount":3,"wrongCount":7}

你知道我哪里出错了吗？

Answer 1

此行为是正常的，因为您的代码（订阅）是异步运行的。与以下内容相同：

let test;
setTimeout(() => {this.test = "hello"}, 1000);
console.log(test);

上面的代码会打印 undifined 对吗？ subscribe() 类似于 setTimeout，因为这两个代码都是异步运行的。

如果你愿意的话：

this.dataSet.subscribe(
x => console.log('test1')
);
console.log('test2');

输出将是：test2 test1 因为 subscribe 中的代码异步

您的情况下正确的代码是：

this.dataService.getData(this.id).subscribe(
  x => {
    this.rightData = x.rightCount;
    console.log('First value: '+ this.rightData);
    // this.wrongData is undefined here
    this.pieChartData = [this.rightData, this.wrongData];
  },
  err => {
    this.wrongData = x.wrongCount;
    console.log('Second value: '+ this.wrongData);
    // this.rightData is undefined here
    this.pieChartData = [this.rightData, this.wrongData];
  }
);

请注意，只有在 this.dataService.getData

中抛出错误时才会出现第二个值 / wrongData

Answer 2

您可以将最终操作封装在订阅的“finaly”中。

像这样

this.dataSet = this.dataService.getData(this.id);
this.dataSet.subscribe(
  x => (this.rightData = x.rightCount),
  x => (this.wrongData = x.wrongCount),
  () => {
    console.log('First value: ' + this.rightData)
    console.log('Second value: ' + this.wrongData)
    this.pieChartData = [this.rightData, this.wrongData]
  }
);

或者只是

this.dataService.getData(this.id).subscribe(
  x => (this.rightData = x.rightCount),
  x => (this.wrongData = x.wrongCount),
  () => {
    console.log('First value: ' + this.rightData)
    console.log('Second value: ' + this.wrongData)
    this.pieChartData = [this.rightData, this.wrongData]
  }
);

请注意，“finally”不接收任何参数，它仅用于在从 observable 接收到成功或错误后进行操作

订阅 observable returns undefined

Subscription of observable returns undefined

angular

typescript

frontend

observable