Diagnostics étendus

Mot-clé let manquant dans une expression *ngFor

Ce diagnostic est émis lorsqu'il manque le mot-clé let dans une expression utilisée dans *ngFor.

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

@Component({
  // The `let` keyword is missing in the `*ngFor` expression.
  template: `<div *ngFor="item of items">{{ item }}</div>`,
})
class MyComponent {
  items = [1, 2, 3];
}

Quel est le problème ?

Un let manquant révèle une erreur de syntaxe dans la chaîne *ngFor. Cela signifie aussi que item ne sera pas correctement mis dans la portée et que {{ item }} ne sera pas résolu correctement.

Que faire à la place ?

Ajoutez le mot-clé let manquant.

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

@Component({
  // The `let` keyword is now present in the `*ngFor` expression,
  // no diagnostic messages are emitted in this case.
  template: `<div *ngFor="let item of items">{{ item }}</div>`,
})
class MyComponent {
  items = [1, 2, 3];
}

Prérequis de configuration

strictTemplates doit être activé pour qu'un diagnostic étendu soit émis. missingNgForOfLet 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": {
        "missingNgForOfLet": "suppress"
      }
    }
  }
}

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