Web services 仅在从服务获取所有数据后才渲染视图？

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

如何防止视图在新的components OnInit方法中从服务获取整个数据之前呈现。 在angular 1中，有一个NG斗篷在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}]);
  }

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

服务

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

团队成员

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

 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>

{{player.name}

位置：{{player.Position}}

球衣号码：{{player.jerseyNumber}}

出生日期：{{player.dateOfBirth}}

国籍：{{player.national}}

合同终止：{{player.contractUntill}}

市场价值：{{player.marketValue}}

未找到所选球队的球员数据

在subscribe（）中处理（complete）=>{}回调，并将布尔值设置为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>

{{player.name}

位置：{{player.Position}}

球衣号码：{{player.jerseyNumber}}

出生日期：{{player.dateOfBirth}}

国籍：{{player.national}}

合同终止：{{player.contractUntill}}

市场价值：{{player.marketValue}}

未找到所选球队的球员数据

如果我理解你的问题，这应该是你想要的。

---

附带说明：在您的后端服务中，IMHO，如果输入的teamId没有玩家，您不应该返回null，而是一个空列表/数组/任何东西。

您在路由中尝试过吗？实际上我不知道如何做，但使用resolve我们只会在返回数据时获取数据，但我知道有时对象将为null。我想显示错误消息，但如果它有值，错误消息将消失。检查这行没有找到所选球队的球员数据，我不这么认为。Resolve获取可以为空的列表，然后呈现视图。顺便说一句，我从来没有遇到过ngIf的问题。如果放置在div.container中，您应该不会看到任何闪烁的IMO。在这种情况下，我们如何实现解析？superbbb！