仅在从服务中获取所有数据后呈现视图

Question

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

如何在新组件 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

在订阅(订阅文档(中处理(完整(=> {} 回调，并将布尔值设置为 true。用你的 *ngIf 检查这个布尔值。

因此，在您的团队组件中：

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，而应返回空的列表/数组/其他内容。