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

【问题标题】：angular list contains elements but length is 0角度列表包含元素但长度为 0
【发布时间】：2020-08-27 04:34:57
【问题描述】：

我使用下面的代码发出 http 获取请求，如下所示

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，即使当我 console.log() 时列表中有列表中的元素。我做错了什么？

【问题讨论】：

标签： angular typescript http asynchronous

【解决方案1】：

没有在本地运行代码，看起来calculateDailyNewConfirmed() 在getCountry() 完成之前运行。

您必须进行设置，以便 calculateDailyNewConfirmed() 仅在 getCountry() 从 API 收到数据后运行。有更好的方法，但最简单的解释和实现是将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();
});
}

希望能解决您的问题。

【讨论】：

【解决方案2】：

calculateDailyNewConfirmed 在subscribe 获得其值之前被调用。

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

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

【讨论】：