Fonction de track non appelée

Ce diagnostic détecte les cas où une fonction de track n'est pas appelée dans les blocs @for.

import {Component} from '@angular/core';

@Component({
  template: `@for (item of items; track trackByName) {}`,
})
class Items {
  protected trackByName(item) {
    return item.name;
  }
}

Quel est le problème ?

Les blocs @for doivent identifier de manière unique les éléments de l'itérable pour effectuer correctement les mises à jour du DOM lorsque des éléments de l'itérable sont réordonnés, ajoutés ou supprimés. Si vous n'appelez pas la fonction, l'algorithme de réconciliation comparera les éléments à l'aide de la référence de la fonction au lieu de la valeur renvoyée.

Que faire à la place ?

Veillez à appeler la fonction de track lorsque vous l'utilisez dans un bloc @for, afin qu'elle s'exécute et que la boucle puisse identifier les éléments de manière unique.

import {Component} from '@angular/core';

@Component({
  template: `@for (item of items; track trackByName(item)) {}`,
})
class Items {
  protected trackByName(item) {
    return item.name;
  }
}

Prérequis de configuration

strictTemplates doit être activé pour qu'un diagnostic étendu soit émis. uninvokedTrackFunction n'a pas d'autre prérequis que strictTemplates.

Et si je ne peux pas l'éviter ?

Ce diagnostic peut être désactivé en modifiant le fichier tsconfig.json du projet :

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "uninvokedTrackFunction": "suppress"
      }
    }
  }
}

Consultez la configuration des diagnostics étendus pour en savoir plus.