值分配给项目里面* ngFor

Question

我使用的球员名单* ngFor

// Get all players. 
 
getPlayers() { 
 
    this.httpService.getPlayers() 
 
    .subscribe(
 
    player => { 
 
     this.players = player; 
 

 
     for (let i in this.players){ 
 
     if(this.players[i].Main_Image_ID){ 
 
      this.getPlayerIMG(this.players[i].Main_Image_ID); 
 
     } 
 
     } 
 
    }, 
 
    error => this.errorMessage = <any>error); 
 
}

<div ion-item *ngFor="let player of players"> 
 
    <img *ngIf="player?.playerIMG" width="50" [src]="'data:image/png;base64,'+playerIMG" /> 
 
    <img *ngIf="!player?.playerIMG" width="50" src="./assets/images/no-image.jpg" /> 
 
    {{player.First_Name}} {{player.Last_Name}} 
 
</div>

由API调用返回的值返回与多个玩家对象的数组。每个玩家都有一些信息和一个图片ID。在我订阅电话并获得玩家后，该列表将被填充。然后我调用另一个API来获取图像，使用imageID。我的目标是在我了解所有球员和他们的imageID之后，用他们的形象填充名单上的各个球员。

// Get image for player. 
 
getPlayerIMG(id) { 
 
    this.httpService.getPlayerIMG(id) 
 
    .subscribe(
 
    playerIMG => { 
 
     this.player.playerIMG = playerIMG; 
 
    }, 
 
    error => this.errorMessage = <any>error); 
 
}

的问题是我怎么可以指定每一个图像标识调用列表（玩家）在各自的项目（球员）的响应。

谢谢！

Answer 1

，最好是写播放器的组件，但你可以使用此代码，并通过播放器的功能，而不是Main_Image_ID

for (let i in this.players){ 
    if(this.players[i].Main_Image_ID){ 
     this.getPlayerIMG(this.players[i]); 
    } 
} 

// Get image for player. 
getPlayerIMG(player) { 
    this.httpService.getPlayerIMG(player.Main_Image_ID) 
    .subscribe(
     playerIMG => { 
     player.playerIMG = playerIMG; 
     }, 
     error => this.errorMessage = <any>error); 
}