Question

   { 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"}
}

我如何在视图中显示对象的播放？（Ionic3，Angular）例如显示每个玩家的角色

Answer 1

您可以使用以下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来循环数组并检索数据。

Answer 2

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

尝试这样的事情

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

如果要加载普通对象，可以使用json管道

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

希望它能正常工作-编码愉快：）

Answer 3

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

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

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

Answer 4

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

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

在Angular4视图中显示对象

4 个答案: