erreur tslint / codelyzer / ng lint: "pour les instructions (... dans ...) doivent être filtrées avec une instruction if"

Question

Message d'erreur de peluches:

src / app / detail / edit / edit.component.ts [111, 5]: pour (... in ...), les instructions doivent être filtrées avec une instruction if

Extrait de code (c’est un code fonctionnel. Il est également disponible à la section validation du formulaire angular.io ):

 for (const field in this.formErrors) {
      // clear previous error message (if any)
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
 

Une idée de comment réparer cette erreur de peluche?

Answer 1

Pour expliquer le problème réel que tslint pointe, une citation de le JavaScript de la documentation de la ...dans l'énoncé:

La boucle va itérer sur tous les énumérable propriétés de l'objet lui-même et ceux de l'objet hérite de son prototype du constructeur (propriétés plus près de l'objet dans la chaîne de prototype remplacer prototypes "propriétés").

Donc, en gros, cela signifie que vous obtiendrez des propriétés que vous ne pourriez pas attendre pour obtenir (à partir du prototype de l'objet de la chaîne).

Pour résoudre cela, nous devons effectuer une itération uniquement sur les objets propres propriétés. Nous pouvons le faire de deux façons différentes (comme suggéré par @Maxxx et @Qwertiy).

Première solution

for (const field of Object.keys(this.formErrors)) {
    ...
}

Ici, nous utilisons l' Objet.Les touches() méthode qui retourne un tableau d'un objet énumérable propriétés, dans le même ordre que celui fourni par une...en boucle (la différence étant qu'un pour-en boucle énumère les propriétés dans la chaîne de prototype).

Deuxième solution

for (var field in this.formErrors) {
    if (this.formErrors.hasOwnProperty(field)) {
        ...
    }
}

Dans cette solution, nous itération de toutes les propriétés de l'objet, y compris ceux qui sont dans la chaîne de prototype, mais l'utilisation de l' Objet.le prototype.hasOwnProperty() méthode qui retourne un booléen indiquant si l'objet a la propriété spécifiée comme propres (non héréditaire) de la propriété, de filtrer les propriétés héritées.

Answer 2

Une façon plus simple d'appliquer la réponse de @ Helzgate est peut-être de remplacer votre "for .. in" par

 for (const field of Object.keys(this.formErrors)) {
 

Answer 3

for (const field in this.formErrors) {
  if (this.formErrors.hasOwnProperty(field)) {

for (const key in control.errors) {
  if (control.errors.hasOwnProperty(key)) {

Answer 4

utilisez Object.keys:

 Object.keys(this.formErrors).map(key => {
  this.formErrors[key] = '';
  const control = form.get(key);

  if(control && control.dirty && !control.valid) {
    const messages = this.validationMessages[key];
    Object.keys(control.errors).map(key2 => {
      this.formErrors[key] += messages[key2] + ' ';
    });
  }
});