角度列表包含元素，但长度为 0

Question

我使用以下代码发出 http get 请求，如下所示

export class Covid19Service {
baseUrl = 'https://api.covid19api.com/';
constructor(private http: HttpClient) { }
getSummary() {
return this.http.get(this.baseUrl + 'summary').subscribe(data => {
console.log(data);
});
}
getCountry() {
return this.http.get(this.baseUrl + 'dayone/country/ie/status/confirmed');
}
}

然后，我将数据解析为 getCountry(( 方法中的列表

export class BarchartComponent implements OnInit {
dailyTotalConfirmed: number[] = [];
dailyNewConfirmed: number[] = [];
constructor(private covid19: Covid19Service) { }
ngOnInit() {
this.getCountry();
this.calculateDailyNewConfirmed();
console.log(this.dailyTotalConfirmed);
console.log(this.dailyNewConfirmed);
}
getSummary() {
return this.covid19.getSummary();
}
getCountry() {
this.covid19.getCountry()
.subscribe(data => {
const covid = Object.keys(data);
for (const key of covid) {
const cases = data[key].Cases;
this.dailyTotalConfirmed.push(cases);
}
});
}
calculateDailyNewConfirmed() {
const data = this.dailyTotalConfirmed;
for (let i = 0; i < data.length - 1; i++) {
const casesToday = data[i];
const casesTomorrow = data[i + 1];
this.dailyNewConfirmed.push(Math.abs(casesTomorrow - casesToday));
}
}
}

当调用 calculateDailyNew(( 方法时，该方法中的 for 循环不会执行，因为列表的长度为 0，即使当我控制台.log(( 列表中有元素。 我做错了什么？

Answer 1

如果不在本地运行代码，看起来calculateDailyNewConfirmed()在getCountry()完成之前就运行了。

您必须对其进行设置，以便仅在getCountry()从 API 收到数据后运行calculateDailyNewConfirmed()。有更好的方法，但最简单的解释和实现是将getCountry()重命名为类似getCountryAndCalculateDailyNewConfirmed()的名称，然后只需在订阅块中进行调用：

getCountryAndCalculateDailyNewConfirmed() {
this.covid19.getCountry()
.subscribe(data => {
const covid = Object.keys(data);
for (const key of covid) {
const cases = data[key].Cases;
this.dailyTotalConfirmed.push(cases);
}
this.calculateNewDailyConfirmed();
});
}

希望这可以解决您的问题。

Answer 2

calculateDailyNewConfirmed

的调用早于subscribe获取其值。

ngOnInit() {
this.getCountry(); // <- starts request
this.calculateDailyNewConfirmed(); // <- checks even request wasn't finished.
}

一种可能的解决方案是将this.calculateDailyNewConfirmed()移动到订阅中getCountry.