Маленькая проблема с * ngFor до Angular HTML

Question

У меня проблема с * ngFor. я думаю, что индекс в моем объекте вкладки "joueurClassement". Это не очень хорошая последовательность чисел. Как вы можете видеть на рисунке ниже этот случай работает, потому что indexe составляет 0,1,2,3,4

по моему HTML =>

  <tbody>
                <tr *ngFor ="let player of joueurClassement; let i = index">
                <td>{{ player.nom }}</td>
                <td>{{ player.prenom }}</td>
                <td>{{ player.point }}</td>
                <td>{{player.victoire}}</td>
                <td>{{player.defaite}}</td>
                <td>{{player.nbdejeu}}</td>
                </tr>
            </tbody>

* ngFor Ok

Но когда индекс не является хорошим порядковым номером, а не 0,1,2,3,4, ngFor - это KO. Как вы можете видеть на рисунке. Мой объект "joueurClassement" не отображается в моем крике. * нг для Ко

Answer 1

Вы правы, ваша проблема в том, что вы получаете разреженных массивов без последовательных индексов.

Вот решение, которое исправит это для вас. Используйте этот шаблон:

<table>
  <tbody>
    <ng-container *ngFor="let keyValuePair of joueurClassement | keyvalue; trackBy: trackKeyValuePair">
      <tr *ngIf="keyValuePair.value as player">
        <td>{{player.nom}}</td>
        <td>{{player.prenom}}</td>
        <td>{{player.point}}</td>
        <td>{{player.victoire}}</td>
        <td>{{player.defaite}}</td>
        <td>{{player.nbdejeu}}</td>
      </tr>
    </ng-container>
  </tbody>
</table>

Я добавил функцию trackBy по соображениям производительности. Это выглядит так:

class MyComponent {
  trackKeyValuePair(_index, keyValuePair): number {
    return keyValuePair.key;
  }
}

Вот рабочее пространство StackBlitz, чтобы показать решение .

Answer 2

Я не знаю, почему возникает эта ошибка, но если вы хотите просто сделать * ngFor, вам не нужно добавлять индекс, например:

<tbody>
            <tr *ngFor ="let player of joueurClassement">
            <td>{{ player.nom }}</td>
            <td>{{ player.prenom }}</td>
            <td>{{ player.point }}</td>
            <td>{{player.victoire}}</td>
            <td>{{player.defaite}}</td>
            <td>{{player.nbdejeu}}</td>
            </tr>
        </tbody>

Вам не нужно указывать индекс * ngFor может быть как Foreach