*ngFor 到 Angular HTML 的小问题

Question

我对 *ngFor 有疑问。我认为索引在我的选项卡对象 "joueurClassement" 中是 ko。这不是一个好的数字序列。如下图所示。这种情况有效，因为 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.As 你可以看到 picture.My 对象 "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.

*ngFor 到 Angular HTML 的小问题

Little Problem with *ngFor to Angular HTML

angular

typescript

indexing

ngfor