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

Answer 1

没有在本地运行代码，就好像calculateDailyNewConfirmed()在getCountry()完成之前已运行。

您必须对其进行设置，以使calculateDailyNewConfirmed()仅在getCountry()从API收到数据后才能运行。有更好的方法，但最简单的解释和实现是将getCountry()重命名为getCountryAndCalculateDailyNewConfirmed()之类的东西，然后在subscribe块内进行该调用：

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。

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

2 个答案: