Angular .subscribe在ngOnInit之后结束执行>>

Question

我是新手。我正在尝试下面的代码来填充饼图。我在构造函数内分配值。但是在这里，方法.subscribe在ngOnInit（）执行之后最后执行。并且它显示为undefined作为this.TestVar

的值

cities: Observable<DataModel>;
TestVar: string;

constructor(private http: HttpClient) {

this.cities = this.http.get<DataModel>('./assets/data.json');

    this.cities.subscribe(events => {
      this.TestVar = events[0].District;
    });
}
ngOnInit() {
    let chart = new CanvasJS.Chart("chartContainer", {
        theme: "light2",
        animationEnabled: true,
        exportEnabled: true,
        title:{
            text: "Monthly Expense"
        },
        data: [{
            type: "pie",
            showInLegend: true,
            toolTipContent: "<b>{name}</b>: ${y} (#percent%)",
            indexLabel: "{name} - #percent%",
            dataPoints: [
                { y: 450, name: this.TestVar },
                { y: 120, name: "Insurance" },
                { y: 300, name: "Traveling" },
                { y: 800, name: "Housing" },
                { y: 150, name: "Education" },
                { y: 150, name: "Shopping"},
                { y: 250, name: "Others" }
            ]
        }]
    });

    chart.render();
}
我甚至尝试在ngOnInit（）中添加以下代码。但这并不能解决我的问题。

this.cities.subscribe(events => {
      this.TestVar = events[0].District;
});
感谢有人可以帮助我。

我是新手。我正在尝试下面的代码来填充饼图。我在构造函数内分配值。但是这里.subscribe方法在ngOnInit（）...

Answer 1

[Observables是async，这意味着您正在尝试在HTTP请求完成之前使用this.TestVar的值，因此仍未定义。

Answer 2

相反，尝试将图表的创建和渲染置于可观察对象的异步块中：

Answer 3

TL; DR