Difficulty with Iterating through Items in Angular HTML with *ngFor

Question

Difficulty with Iterating through Items in Angular HTML with *ngFor

Having an issue with *ngFor. It seems like the index in my tab object "joueurClassement" is not in the correct number sequence. The picture below illustrates this problem, where it works fine when the indexes are 0,1,2,3,4.

In my 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 Resolution

However, if the index numbers are not in the correct sequence (not 0,1,2,3,4), then the ngFor fails to display properly as shown in the following picture. My object "joueurClassement" does not appear on the screen. *ngFor Issue

angular typescript indexing ngfor

Answer 1

Answer №1

It seems like the issue you're facing is related to receiving sparse arrays with non-consecutive indices.

To resolve this, try implementing the following template:

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

Additionally, I included a trackBy function for better performance. Here's how it can be implemented:

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

You can view the solution in action on StackBlitz by clicking here.

Answer 2

It seems like the issue you're facing is related to receiving sparse arrays with non-consecutive indices.

To resolve this, try implementing the following template:

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

Additionally, I included a trackBy function for better performance. Here's how it can be implemented:

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

You can view the solution in action on StackBlitz by clicking here.

Answer 3

Answer №2

This bug seems to occur for unknown reasons, but if you simply want to use *ngFor without specifying an index, you can do it like this:

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

You can skip specifying the index in *ngFor as it behaves similar to a Foreach loop.

Answer 4

This bug seems to occur for unknown reasons, but if you simply want to use *ngFor without specifying an index, you can do it like this:

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

You can skip specifying the index in *ngFor as it behaves similar to a Foreach loop.

Difficulty with Iterating through Items in Angular HTML with *ngFor

Answer №1

Answer №2

Similar questions

Recursive type analysis indicates that the instantiation of the type is excessively deep and may lead to potential infinite loops

How do I retrieve a specific svg element in Angular among multiple elements?

Display the list of cities associated with the country chosen in the form

Looking to establish combinations in typescript? The answer lies in utilizing a discriminated union

Experimenting with key directive in the newest version of Angular (9)

CORS problem arises specifically in NestJS and Vercel when sending POST requests

Is it possible to use a component created in the newest version of Angular in apps developed with older versions of Angular?

Choose the AuthGuard category in real-time

Strategies for preventing profanity in Typescript within Nuxt 2 implementation

Considering the move from AngularJS 1.4 to Angular 8 is a significant one, the question arises: should one opt to migrate to 1.5 before upgrading

What is the impact on active subscriptions when the browser is closed or refreshed?

The overall package size post transitioning to standalone versions and incorporating lazy loading

Ensuring Consistency of Values Between Child and Parent Components

Encountering a 404 error while attempting to test a contact form on a Next.js website using a local server

Acquiring a second access token in Java for the Graph API using an OIDC-compliant token can be achieved through the OBO flow method

Looking to effortlessly move and arrange items with ng2-drag-drop in Angular 2?

Comparison between TypeScript's variable scope and JavaScript's variable scope

Protected Node.js API paths

What is the best way to modify onClick events for elements in Ionic v4 with React?

Issues arise when attempting to use the Android KeyUp, KeyDown, and KeyPress events in conjunction with Angular2