我有一个使用 *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 调用返回的值返回具有多个玩家的对象数组。每个玩家都有一些信息和一个 imageID。在我订阅电话并获取球员后,列表将被填充。然后,我使用 imageID 调用另一个 API 来获取图像。我的目标是在了解所有玩家及其图像 ID 后,用他们的图像填充列表中相应玩家的图像。
// Get image for player.
getPlayerIMG(id) {
this.httpService.getPlayerIMG(id)
.subscribe(
playerIMG => {
this.player.playerIMG = playerIMG;
},
error => this.errorMessage = <any>error);
}
问题是如何将每个 imageID 调用的响应分配给列表(玩家)上的相应项目(玩家)。
谢谢!
最佳答案
最好为播放器编写一个组件,但您可以使用此代码并将播放器传递给函数而不是 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);
}
关于javascript - 为 *ngFor 内的项目赋值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41356254/