javascript - 无法以 Angular 获取在 ngOnInit() 中动态生成的数组的长度

Question

无法获取已在 angular 的 ngOnInit() 中动态生成的数组的长度。

@Component({
  selector: 'rise-our-champions',
  templateUrl: './our-champions.component.html',
  styleUrls: ['./our-champions.component.css']
})
export class OurChampionsComponent implements OnInit {

champs: any = [];

ngOnInit() {
    this.getChampions(0, 12, 'created_at', 'desc', this.campaignId); 
    console.log(this.champs);
    console.log(this.champs.length); //<================= This displays 0 where as my array populates with 4 values.
  }

  getChampions(offset: any, size: any, sort: any, order: any, id: any) {

    this._restApiService.getCampaignChampion(offset, size, sort, order, id).subscribe(
  data => {
    // this.champions = data['champions']
    data['champions'].forEach((champion: any) => {
      this.champs.push(champion);
    });

    if (data['champions'].length < 12) {
      this.showMore = false;
    } else {
      this.showMore = true;
    }
  },
  error => {
    if (error.status == 400) {
      this.router.navigate(['/error']);
    } else {
      this.errorMessage = <any>error,
        this.missionService.announceMissionToShowCustomAlert({
          requestType: FeatureType.showCustomAlert,
          title: 'Error',
          message: '<p>' + this.errorMessage + '</p>',
          redirectType: FeatureType.isError
        })
    }
  },
  () => {

  }
);

我调用 ngOnInit() 生命周期钩子(Hook)中的函数，它显示以下输出，如何获取数组的长度？请看下面的截图:

Answer 1

由于 async 调用，您的 console.log() 会在值出现之前打印出来。将 console.log() 放入您的 getChampions() 函数中，如下所示:

getChampions(offset: any, size: any, sort: any, order: any, id: any) {
  this._restApiService.getCampaignChampion(offset, size, sort, order, id).subscribe(
    data => {
      // this.champions = data['champions']
      data['champions'].forEach((champion: any) => {
      this.champs.push(champion);
    });

    if (data['champions'].length < 12) {
      this.showMore = false;
    } else {
      this.showMore = true;
    }
  },
  error => {
    if (error.status == 400) {
      this.router.navigate(['/error']);
    } else {
      this.errorMessage = <any>error,
        this.missionService.announceMissionToShowCustomAlert({
          requestType: FeatureType.showCustomAlert,
          title: 'Error',
          message: '<p>' + this.errorMessage + '</p>',
          redirectType: FeatureType.isError
        })
    }
  },
  () => {
     // THIS IS EXECUTED AFTER THE SUBSCRIBE COMPLETES
     console.log(this.champions);
  }
}