Присвоить значение элемента внутри * 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 возвращает массив объектов с несколькими игроками. У каждого игрока есть информация и идентификатор изображения. После подписки на звонок и получения игроков список будет заполнен. Затем я вызываю другой API, чтобы получить изображение, используя идентификатор изображения. Моя цель - после того, как я знаю всех игроков и их идентификатор изображения, чтобы заполнить соответствующий проигрыватель в списке своим изображением.

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

Вопрос заключается в том, как я могу назначить реакцию каждого ImageID вызова соответствующего пункта (игрока) в списке (игроков).

Спасибо!

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