Question

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

如何防止视图从渲染到新组件OnInit方法中从Service获取整个数据的时间。在角度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

处理（完整）=＆gt; {}回调内部订阅（Subscribe Docs）并将布尔值设置为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，而是一个空的List / Array /无论如何。

从服务中提取所有数据后，仅渲染视图？

1 个答案: