web-dev-qa-db-fra.com

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

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 (code fonctionnel). Il est également disponible à l’adresse de validation de 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?

angularangular2-formsangular-clitslint
176
choopage - Jek Bao

Une solution plus simple pour appliquer la réponse de @ Helzgate est peut-être de remplacer votre "pour .. dans" par

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

Pour expliquer le problème réel signalé par tslint, une citation tirée de la documentation JavaScript de pour ... dans l'instruction :

La boucle itérera sur toutes les propriétés énumérables de l'objet lui-même et celles que l'objet hérite du prototype de son constructeur (les propriétés plus proches de l'objet dans la chaîne de prototypes remplacent les propriétés des prototypes).

En gros, cela signifie que vous obtiendrez des propriétés que vous n’attendriez pas (de la chaîne de prototypes de l’objet).

Pour résoudre ce problème, nous devons parcourir uniquement les propriétés propres aux objets. Nous pouvons le faire de deux manières différentes (comme suggéré par @Maxxx et @Qwertiy).

Première solution

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

Ici, nous utilisons la méthode Object.Keys () qui renvoie un tableau des propriétés énumérables d'un objet donné, dans le même ordre que celui fourni par une boucle for ... in (la différence étant qu'un La boucle for-in énumère également les propriétés de la chaîne de prototypes).

Deuxième solution

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

Dans cette solution, nous itérons toutes les propriétés de l'objet, y compris celles de sa chaîne de prototypes, mais nous utilisons la méthode Object.prototype.hasOwnProperty () , qui renvoie un booléen indiquant si l'objet possède la propriété spécifiée comme propre ( non hérité), pour filtrer les propriétés héritées.

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

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

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] + ' ';
    });
  }
});
13
Helzgate