Je suis relativement nouveau dans l'apprentissage d'Angular et j'ai suivi quelques instructions d'une démo de PluralSight sur la configuration d'un service de base, d'un composant et d'une page HTML.

Lorsque j'exécute mon service et le débogage, je peux voir que le service réussit à récupérer les données dont j'ai besoin. Cependant, une partie du HTML ne semble pas passer par la détection des changements. L'attribut de date que j'affiche le fait avec succès, mais mon tableau est simplement ignoré.

J'ai essayé de créer explicitement un tableau séparé et de l'attribuer à une variable différente, ce qui ne fonctionnait pas non plus. Y a-t-il quelque chose autour du ngModel et de la détection de changement qui me manque?

Un service:

@Injectable({
  providedIn: 'root'
})
export class RankingService {
  private rankingUrl = 'https://localhost:44381/api/Ranking'

  constructor(private http: HttpClient) { }

  getRanking(): Observable<IRanking> {
    return this.http.get<IRanking>(this.rankingUrl)
      .pipe(
        tap(data => console.log('All: ' + JSON.stringify(data))),
        catchError(this.handleError)
      );
  }

HTML:

<div class='row'>
  {{'Last Updated: ' + ranking?.startDateTime}}
</div>
<table class='table' *ngIf='ranking'>
  <thead>
    <tr>
      <th>Rank</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let position of ranking.rankpositions?.slice(0,30)'>
      <td>
        {{ position.Rank }}
      </td>
    </tr>
  </tbody>
</table>

Composante:

export class RankingListComponent implements OnInit {
  errorMessage = '';
  ranking: IRanking;

  constructor(private rankingService: RankingService) { }

  ngOnInit(): void {
    this.rankingService.getRanking().subscribe({
      next: ranking => {
        this.ranking = ranking;
      },
      error: err => this.errorMessage = err
    });
  }

}

IRanking est une interface, avec un tableau de rankPositions (qui représente une autre interface).

En sortie, j'obtiens ceci (j'ai supprimé certains éléments HTML, pour rendre le segment de code plus petit):

enter image description here

Dans la console, j'ai clairement le tableau rankpositions rempli: entrez la description de l'image ici

0
user2585188 3 sept. 2020 à 16:18

2 réponses

Meilleure réponse

Veuillez remplacer rankpositions par rankPositions

1
Owen Kelvin 3 sept. 2020 à 17:02

Vous avez une faute de frappe, cela devrait donc être fermé.

Mais au-delà de cela, exécuter des fonctions comme celle-ci dans le template va pratiquement toujours vous causer des problèmes de détection de changement. utilisez plutôt le tube slice ici pour une solution rapide:

<tr *ngFor='let position of ranking.rankPositions | slice:0:30'>

Une meilleure solution IMO serait de passer au tube async et d'utiliser les opérateurs rx pour exécuter votre tranche.

Une meilleure pratique angulaire générale consiste à ne pas exécuter de fonctions dans des modèles, à utiliser des tubes le cas échéant, mais généralement vos fonctions doivent être exécutées dans votre contrôleur de composants.

1
bryan60 3 sept. 2020 à 17:03