在 ngOnInit 中调用的函数返回空

Question

当数组“系列”完全填充时，我如何控制台.log。我知道 ngOnInit 是异步的，但是如何在完成处理后加载我的函数，而不是在没有填充值时立即加载 console.log。我知道我可以附加一个 setTimeout，但还有其他方法吗？

这是我的 console.log 在没有 setTimeout 的情况下显示的内容：

以下是 setTimeOut 显示的内容（期望的结果 AKA 填充系列数组）

我的代码没有 setTimeout：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/data.service';
import { ParseDataService } from '../../services/parse-data.service'
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { Map } from './mapClass';

@Component({
  selector: 'app-recovered',
  templateUrl: './recovered.component.html',
  styleUrls: ['./recovered.component.css']
})
export class RecoveredComponent implements OnInit {
  globalRecovData: Array<any> = [];
  totalRecovByDate: Array<any> = [];
  totalRecovToday: number;

  constructor(private dataService: DataService, private parseData: ParseDataService) {}

  ngOnInit() {
    this.GlobalRecov();
    this.getMapData();
  }

  getMapData() {
    let map = new Map;
    const newMap = map.create({
      date: 'Recovered',
      series: []
    })
    this.totalRecovByDate.map(data => {
        newMap.series.push(data);
      })
      let newArrayMap = [];
      newArrayMap.push(newMap);
      console.log(newArrayMap)
  }

  GlobalRecov(){
      this.dataService.GlobalRecovGet().subscribe((rawdata) => {
        this.globalRecovData = this.parseData.parseGlobalData(rawdata, this.globalRecovData);
        this.totalRecovToday = this.parseData.getTotalToday(rawdata, this.globalRecovData);
        this.totalRecovByDate = this.parseData.getTotalByDate(rawdata, this.globalRecovData);


      })
    }
  }

Answer 1

这是因为dataService.GlobalRecovGet() 是异步的，这就是为什么getMapData() 将运行而GlobalRecov() 的响应仍处于等待状态。由于getMapData() 使用了totalRecovByDate，这取决于服务的响应，因此此时它将是未定义的。

您可以考虑将getMapData() 嵌套在GlobalRecov() 中。这将确保getMapData() 在来自dataService.GlobalRecovGet() 的响应返回后运行。

ngOnInit() {
  this.GlobalRecov();
}

getMapData() {
  let map = new Map;
  const newMap = map.create({
    date: 'Recovered',
    series: []
  });
  this.totalRecovByDate.map(data => {
    newMap.series.push(data);
  })
  let newArrayMap = [];
  newArrayMap.push(newMap);
  console.log(newArrayMap)
}

GlobalRecov(){
  this.dataService.GlobalRecovGet().subscribe((rawdata) => {
    this.globalRecovData = this.parseData.parseGlobalData(rawdata, this.globalRecovData);
    this.totalRecovToday = this.parseData.getTotalToday(rawdata, this.globalRecovData);
    this.totalRecovByDate = this.parseData.getTotalByDate(rawdata, this.globalRecovData);
    this.getMapData();
  }) 
}