[英]Subscription of observable returns undefined
I use a service to fill my observable with data from the backend.我使用一项服务用来自后端的数据填充我的可观察对象。 The backend is delievering the correct data.
后端正在传递正确的数据。 Now I want to take the values of the observable and build a piechart.
现在我想获取 observable 的值并构建一个饼图。
The part of the Code looks like this:代码部分如下所示:
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];
It doesn't work and the console output is:它不起作用,控制台 output 是:
First Value: undefined
Second Value: undefined
But when I change the code to the following, the console log shows the right data:但是当我将代码更改为以下内容时,控制台日志显示正确的数据:
this.dataSet = this.dataService.getData(this.id);
this.dataSet.subscribe(
x => console.log(x.rightCount),
x => console.log(x,wrongCount),
);
Output: Output:
3
7
Additional code:附加代码:
export interface Counter {
rightCount: number;
wrongCount: number;
}
dataSet: Observable<Counter> = of();
The service looks like:该服务看起来像:
getData(id: number): Observable<Counter> {
return this.http.get<Counter>(`/backend/getData?id=${id}`);
}
The firefox log shows me, the backend returns: firefox 日志显示我,后端返回:
{"rightCount":3,"wrongCount":7}
Do you have an Idea where I make a mistake?你知道我在哪里犯了错误吗?
this behaviour is normal since your code (subscribe) runs asynchronously.这种行为是正常的,因为您的代码(订阅)是异步运行的。 It would be the same as:
这将与以下内容相同:
let test;
setTimeout(() => {this.test = "hello"}, 1000);
console.log(test);
the code above would print undifined
right?上面的代码会打印
undifined
对吗? doing subscribe()
is similar to a setTimeout
since both code runs asynchronously.执行
subscribe()
类似于setTimeout
,因为这两个代码都是异步运行的。
also if you would do:如果你愿意的话:
this.dataSet.subscribe(
x => console.log('test1')
);
console.log('test2');
the output would be: test2
test1
because the code inside subscribe
asynchronously output 将是:
test2
test1
因为里面的代码是异步subscribe
的
the correct code in your case would be:你的情况下正确的代码是:
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];
}
);
please note that the Second value / wrongData will only occurr if an error is thrown in this.dataService.getData
请注意,只有在
this.dataService.getData
中抛出错误时才会出现第二个值/wrongData
You can encapsulate the final manipulation inside the "finaly" in subscribe.您可以将最终操作封装在订阅的“finaly”中。
something like this像这样的
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]
}
);
Or just要不就
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]
}
);
Note that the "finally" doesn't receive any parameters, it only serves to do manipulations after receiving success or error from the observable请注意,“finally”不接收任何参数,它仅用于在从可观察对象接收到成功或错误后进行操作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.