* ngFor Angular HTML的小问题

Question

我对* ngFor有问题。我认为索引在我的标签对象“ joueurClassement”中是ko。它不是一个好的数字序列。正如您可以看到下面的图片。这种情况有效，因为索引为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”没有显示在我的尖叫声中。*ngFor Ko

Answer 1

我不知道为什么会发生此错误，但是如果您只想执行* 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

Answer 2

是的，您的问题是您得到的是[[稀疏数组，但没有连续的索引。

以下是一种可以为您解决此问题的解决方案。使用此模板：

<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;
  }
}

Here's a StackBlitz workspace to show the solution。