Question

无法获得以角度为单位在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（）生命周期钩子中调用该函数，它显示以下输出，如何获取数组的长度？请参阅以下快照：

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);
  }
}

Answer 2

您的this.getChampions函数会触发对服务器的异步api调用。所以你的console.log语句在你的this.champs设置之前执行

因此，您需要在.subscribe中将服务电话和ngOnInit返回给它。使用.map挂钩在this. getChampions`中执行数据操作。像这样，

    @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)
          .subscribe(() => {
            console.log(this.champs);
            console.log(this.champs.length);
          });
      }

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

    return this._restApiService.getCampaignChampion(offset, size, sort, order, id)
      .map(data => {
        // this.champions = data['champions']
        this.champs = data.champions;
        this.showMore = data.champions.length > 11;
      })
      .catch(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（）中以角度动态生成的数组的长度

2 个答案: