在视图Angular4中显示对象

Posted 2023-03-13

【中文标题】在视图Angular4中显示对象

【英文标题】：Display objects in the view 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，角） 例如显示每个玩家的角色

【参考方案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】：

您可以使用此 *** 帖子的方法来做到这一点：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>

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