Отображение объектов в представлении Angular4

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

Если вы используете угловой 6.1 или выше, вы можете использовать keyValue pipe

Попробуйте что-то вроде этого

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

Если вы хотите загрузить простой объект, вы можете использовать json pipe

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

Надеюсь, это сработает - Удачного кодирования:)

Answer 2

Вы можете сделать это, используя подход, описанный в этом сообщении stackoverflow: Как отобразить объект json, используя * 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 как массива вы можете легко использовать *ngFor в вашем html для зацикливания массива и получения ваших данных.

Answer 3

Более лучшим подходом будет использование труб. Обратитесь к этой реализации на stackblitz.

Реализация трубы: https://stackblitz.com/edit/ionic-xvt2ha
Выход: https://ionic -xvt2ha.stackblitz.io

Answer 4

Для вашего конкретного вопроса, попробуйте:

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

игроки относятся к объекту, который вы упомянули выше.