在视图Angular4中显示对象答案

【问题标题】：Display objects in the view Angular4在视图Angular4中显示对象
【发布时间】：2019-05-28 17:37:25
【问题描述】：

   { player0: {select_by: "player_id", i: 107993, role: "main", team: "team1"}
    player1: {select_by: "player_id", i: 108322, role: "main", team: "team1"}
    player2: {select_by: "player_id", i: 107995, role: "main", team: "team1"}
    player3: {select_by: "player_id", i: 108033, role: "main", team: "team1"}
    player4: {select_by: "player_id", i: 108866, role: "main", team: "team1"}
}

如何在视图中显示对象的这种播放？（离子3，角）例如显示每个玩家的角色

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

如果您使用 Angular 6.1 或更高版本，您可以使用 keyValue 管道

试试这样的

<div *ngFor="let item of playersObject | keyvalue;>{{item.key}} : {{ item.value.role }}</div>

如果你想加载一个普通的对象，你可以使用json pipe

<div>{{playerObject | json}}</div>

希望它有效 - 编码快乐 :)

【讨论】：

【解决方案2】：

更好的方法是使用管道。请参阅 stackblitz 上的此实现。

管道实现：https://stackblitz.com/edit/ionic-xvt2ha
输出：https://ionic-xvt2ha.stackblitz.io

【讨论】：

【解决方案3】：

您可以使用此 stackoverflow 帖子的方法来做到这一点：How to display json object using *ngFor

另一种选择是创建一个辅助数组，将所有玩家放入其中。

@Component({
  selector: "app-selector",
  templateUrl: "your.html",
  styleUrls: ["your.scss"]
})
export class Your-Class implements OnInit {
  public playerArr: Player[];
  ...

  ngOnInit() {
    this.playerArr = [];
    // Iterate your object here named as players and push all players into array
    for(let player in players){
        this.playerArr.push(players[player]);
    }
  }

  ...
}

将 json 重建为数组后，您可以轻松地在 html 中使用 *ngFor 循环数组并检索数据。

【讨论】：

【解决方案4】：

对于您的具体问题，请尝试：

<div *ngFor="let player of players; let i = index">
   {{ player["player" + i]["role"] }}
<div>

玩家指的是你上面提到的对象。

【讨论】：