web-services - 仅在从服务获取所有数据后渲染 View ？

Question

我有一个表组件，当用户选择特定行时，他会被重定向到团队组件的不同路径。我想在组件获取来自服务的所有数据后加载新路由的 View 。

如何防止 View 在新组件 OnInit 方法中从服务获取全部数据之前渲染。在 Angular 1 中有 ngCloak 如何在 Angular 2 中做到这一点。

我使用了 ngIf，但在数据加载之前，div 弹出然后消失

我的表格组件

  onSubmit(team:any){
    this.teamId = team._links.team.href.split('/').pop(-1);
    this.competitionService.storeTeamCrest(team.crestURI);
    this.router.navigate(['team', {id: this.teamId}]);
  }

服务

 storeTeamCrest(link:string){
    this.teamCrest = link;
  }

  getPlayers(id:string){
    let headers = new Headers();
    headers.append('X-Auth-Token', 'XXX');
    return this.http.get('https://api.football-data.org/v1/teams/'+id+'/players',{headers:headers}).map(response => response.json())
  }

  getFixtures(id:string){
    let headers = new Headers();
    headers.append('X-Auth-Token', '7c94f28bddf34648bd9a6f5c2e2da0f0');
    return this.http.get('https://api.football-data.org/v1/teams/'+id+'/fixtures',{headers:headers}).map(response => response.json())
  }

团队组成

 ngOnInit(){
    this.teamId = this.route.snapshot.params['id'];
    this.teamCrest = this.competitionService.teamCrest;
    this.getPlayers();
  }

  getPlayers(){
    this.competitionService.getPlayers(this.teamId).subscribe(player => this.players = player.players);
  }

团队组件模板

<div class="container">
    <div class="row">
      <div *ngFor="let player of players"#data>
        <div class="col-md-4">
          <div class="well box">
            <img class="avatar" src="{{teamCrest}}">
            <h4> {{player.name}} </h4>
            <hr style="background-color:black;" />
            <span class="label label-default"><strong>Position :</strong> {{player.position}} </span><br/>
            <span class="label label-primary"><strong>Jersey Number :</strong> {{player.jerseyNumber}} </span><br/>
            <span class="label label-success"><strong>Date Of birth :</strong> {{player.dateOfBirth}}</span><br/>
            <span class="label label-info"><strong>Nationality :</strong> {{player.nationality}} </span><br/>
            <span class="label label-warning"><strong>Contract Untill :</strong> {{player.contractUntil}}</span><br/>
            <span class="label label-success"><strong>Market Value :</strong> {{player.marketValue}}</span><br/>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div *ngIf="!players?.length">
    <h3>No Player Data found For the Selected Team</h3>
</div>

Answer 1

处理 subscribe ( Subscribe Docs ) 内的 (complete) => {} 回调并将 bool 值设置为 true。使用 *ngIf 检查此 bool 值。

因此，在您的团队组件内:

players:any[] = [];
loadCompleted:boolean = false;
ngOnInit(){
    this.teamId = this.route.snapshot.params['id'];
    this.teamCrest = this.competitionService.teamCrest;
    this.getPlayers();
  }

  getPlayers(){
    this.loadCompleted = false;
    this.competitionService.getPlayers(this.teamId)
       .subscribe(
                  player => this.players = player.players,
                  (error) => console.error(error), 
                  () => this.loadCompleted = true)
       );
  }

然后在您的 HTML 模板中:

<div *ngIf="loadCompleted" class="container">
    <div class="row">
      <div *ngFor="let player of players" #data>
        <div class="col-md-4">
          <div class="well box">
            <img class="avatar" src="{{teamCrest}}">
            <h4> {{player.name}} </h4>
            <hr style="background-color:black;" />
            <span class="label label-default"><strong>Position :</strong> {{player.position}} </span><br/>
            <span class="label label-primary"><strong>Jersey Number :</strong> {{player.jerseyNumber}} </span><br/>
            <span class="label label-success"><strong>Date Of birth :</strong> {{player.dateOfBirth}}</span><br/>
            <span class="label label-info"><strong>Nationality :</strong> {{player.nationality}} </span><br/>
            <span class="label label-warning"><strong>Contract Untill :</strong> {{player.contractUntil}}</span><br/>
            <span class="label label-success"><strong>Market Value :</strong> {{player.marketValue}}</span><br/>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div *ngIf="loadCompleted && !players?.length">
    <h3>No Player Data found For the Selected Team</h3>
</div>

如果我理解你的问题，这应该可以满足你的要求。附注:恕我直言，在您的后端服务中，如果输入 teamId 没有玩家，而是空列表/数组/其他内容，则不应返回 null。