未定义的varibale已声明是否正在从ngOnInit上的api获取数据

Question

我正在尝试使用angular从nodeJS API获取数据，我声明了一个变量，我想影响服务器对它的响应，下面是我的代码：

export class SondageSingleComponent implements OnInit, AfterViewInit {
@ViewChild('containerPieChart') element: ElementRef;
survey: any = {};
currentUser: any;
statistics: any;
colorCounter: any = 0;
d3Colors: any[] = ["#3182bd", "#6baed6", "#9ecae1", "#c6dbef", "#e6550d"];
private host: D3.Selection;
private svg: D3.Selection;
private width: number;
private height: number;
private radius: number;
private htmlElement: HTMLElement;
private pieData = [];
constructor(
private http: HttpClient,
private route: ActivatedRoute,
private router: Router,
private toastr: ToastrService
) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.http.get('/api/surveys/' + params.id).subscribe(survey => {
this.survey = survey;
// console.log(this.survey)
debugger
this.http.get('/api/surveys/getStatistics/' + params.id).subscribe(statistics => {
this.statistics = statistics;
this.statistics.options.forEach(option => {
this.pieData.push(option.number);
option.color = this.d3Colors[this.colorCounter];
this.colorCounter = this.colorCounter + 1;
});
});
}, error => {
if (error.status === 400) {
this.showError(error.error.error, 'Erreur!');
if (error.error.error === 'Le sondage demandé n'existe plus!') {
this.router.navigateByUrl('/sondage');
}
}
});
});
}

---

数据成功地来自节点侧，当我试图影响数据来调查变量和尝试时，任何人都能说出为什么不能读取这个。调查？

Answer 1

这就是我实现它的方式(看看代码注释(

ngOnInit() {
this.route.params
.subscribe(params => {
this.http.get('/api/surveys/' + params.id)
.pipe(
take(1),
// using switchMap is a lot better than subscribing
switchMap(survey => {
this.survey = survey;
return this.http.get('/api/surveys/getStatistics/' + params.id)
})
)
.subscribe(statistics => {
const newPieData = []
// using .map is a better use of javascript
statistics.options = statistics.options
.map(option => {
newPieData.push(option.number);
this.colorCounter = this.colorCounter + 1;
option.color = this.d3Colors[this.colorCounter];
return option;
});
this.pieData = [...this.pieData, ...newPieData];
// change this.statistics reference only at the end
// a change triggers the angular cycle
this.statistics = statistics;
}, error => {
if (error.status === 400) {
this.showError(error.error.error, 'Erreur!');
if (error.error.error === 'Le sondage demandé n'existe plus!') {
this.router.navigateByUrl('/sondage');
}
}
});
});
}

我真的建议使用类型。

希望这能有所帮助！

Answer 2

具有可观察性的黄金法则：不要嵌套订阅！

看起来你想：

1. 侦听路由参数更改
2. 根据路由参数发出2个http请求
3. 根据http响应更新图表

收听this.route.params是#1的一个良好开端。

其次，使用switchMap来运行一个新的observable。并使用forkJoin并行调用多个可观测值。

ngOnInit() {
this.route.params.pipe(
switchMap(params => forkJoin({
survey: this.http.get('/api/surveys/' + params.id),
statistics: this.http.get('/api/surveys/getStatistics/' + params.id)
}))
).subscribe(result => {
this.survey = result.survey;
this.statistics = result.statistics;
this.updateChart(result.statistics);
}, 
error => this.handleError(error)
);
}
private handleError(error) {
if (error.status === 400) {
this.showError(error.error.error, 'Erreur!');
if (error.error.error === 'Le sondage demandé n'existe plus!') {
this.router.navigateByUrl('/sondage');
}
}
}
private updateChart(statistics) {
statistics.options.forEach(option => {
this.pieData.push(option.number);
option.color = this.d3Colors[this.colorCounter];
this.colorCounter = this.colorCounter + 1;
});  
}

演示：https://stackblitz.com/edit/angular-m4agxv

角度<8

forkJoin({})仅在RxJS 6.5(角度>=8(之后可用。对于早期的版本，您必须传入一组可观测值。

ngOnInit() {
this.route.params.pipe(
switchMap(params => forkJoin([
this.http.get('/api/surveys/' + params.id),
this.http.get('/api/surveys/getStatistics/' + params.id)
]))
).subscribe(result => {
this.survey = result[0];
this.statistics = result[1];
this.updateChart(result[1]);
}, 
error => this.handleError(error)
);
}