为 *ngFor 中的项目赋值答案

【问题标题】：Assign value to item inside *ngFor为 *ngFor 中的项目赋值
【发布时间】：2016-12-28 06:03:51
【问题描述】：

我有一个使用 *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 来获取图像。我的目标是在我知道所有玩家和他们的 imageID 之后，用他们的图像填充列表中的各个玩家。

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

问题是如何将每个 imageID 调用的响应分配给列表（玩家）上的相应项目（玩家）。

谢谢！

【问题讨论】：

你的 getPlayerIMG 函数应该返回一个 promise 而不是 observable，并且在调用它时需要被链接，使用 .then() 在 promise 解决/拒绝之后，你可以设置它们的正确图像.

标签： javascript angular ionic2

【解决方案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);
}

【讨论】：