tslint / codelyzer / ng fusselfehler: "for (… in…) Anweisungen müssen mit einer if-Anweisung gefiltert werden"

Flusenfehlermeldung:

src / app / detail / edit / edit.component.ts [111, 5]: for (... in ...) Anweisungen müssen mit einer if-Anweisung gefiltert werden

Code-Snippet (Es handelt sich um einen Arbeitscode . Er ist auch im Abschnitt zur Überprüfung des Formulars angle.io verfügbar. ):

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

Irgendeine Idee, wie man diesen Flusenfehler behebt?

Um das eigentliche Problem zu erklären, auf das tslint hinweist, ein Zitat aus der JavaScript-Dokumentation der for ... in-Anweisung :

Die Schleife durchläuft alle aufzählbaren Eigenschaften des Objekts selbst und die Eigenschaften, die das Objekt vom Prototyp seines Konstruktors erbt (Eigenschaften, die näher am Objekt in der Prototypkette liegen, überschreiben die Eigenschaften der Prototypen).

Im Grunde bedeutet dies, dass Sie Eigenschaften erhalten, die Sie möglicherweise nicht erwarten (aus der Prototypenkette des Objekts).

Um dies zu lösen, müssen wir nur über die eigenen Eigenschaften des Objekts iterieren. Wir können dies auf zwei verschiedene Arten tun (wie von @Maxxx und @Qwertiy vorgeschlagen).

Erste Lösung

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

Hier verwenden wir die Object.Keys () -Methode, die ein Array der eigenen aufzählbaren Eigenschaften eines bestimmten Objekts in derselben Reihenfolge zurückgibt, wie sie von einer for ... in-Schleife bereitgestellt wird (der Unterschied besteht darin, dass eine for-in-Schleife Eigenschaften in auflistet auch die Prototypenkette).

Zweite Lösung

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

In dieser Lösung iterieren wir alle Eigenschaften des Objekts, einschließlich derjenigen in seiner Prototypkette, verwenden jedoch die Methode Object.prototype.hasOwnProperty () , die einen Booleschen Wert zurückgibt, der angibt, ob das Objekt die angegebene Eigenschaft als eigene (nicht geerbte) Eigenschaft hat, um zu filtern die geerbten Eigenschaften aus.

Eine bessere Möglichkeit, die Antwort von @ Helzgate anzuwenden, besteht möglicherweise darin, Ihr 'for .. in' durch zu ersetzen

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

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

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

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

Wenn das Verhalten von for (... in ...) für Ihre Zwecke akzeptabel / notwendig ist, können Sie tslint anweisen, es zuzulassen.

Fügen Sie dies in tslint.json dem Abschnitt "Regeln" hinzu.

"forin": false

Ansonsten hat @Maxxx die richtige Idee mit

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

Ich denke, in dieser Nachricht geht es nicht darum, die Verwendung zu vermeiden switch. Stattdessen möchten Sie, dass Sie nach suchen hasOwnProperty. Der Hintergrund kann hier gelesen werden: https://stackoverflow.com/a/16735184/1374488