[解決済み】tslint / codelyzer / ng lintのエラーです。"for (... in ...) 文は、if 文でフィルタリングする必要があります"

質問

Lintのエラーメッセージです。

src/app/detail/edit/edit.component.ts[111, 5]: for (... in ...) 文は、if文でフィルタリングする必要があります。

コードスニペット（動作するコードです。また、以下のサイトでも公開されています。 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] + ' ';
        }
      }
    }

このlintエラーを修正する方法に心当たりはありますか？

解決方法は？

への 実際の問題を説明する からの引用です。 のJavaScriptドキュメントを参照してください。 for...in ステートメント :

このループはオブジェクトのすべての列挙可能なプロパティに対して反復します。 と、そのオブジェクトのコンストラクタのプロトタイプから継承するもの (プロトタイプチェーンでよりオブジェクトに近いプロパティは プロトタイプのプロパティ)。

つまり、基本的には（オブジェクトのプロトタイプチェーンから）期待しないようなプロパティが得られるということです。

これを解決するには、オブジェクト自身のプロパティのみを繰り返し処理する必要があります。これには2つの方法があります（@Maxxxと@Qwertiyが提案した方法）。

第一の解決策

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

ここでは オブジェクト.キー() このメソッドは、与えられたオブジェクト自身の列挙可能なプロパティの配列を、for...inループで提供されるのと同じ順序で返します（for-inループはプロトタイプチェーン内のプロパティも列挙するという違いがあります）。

第二の解決策

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

このソリューションでは、プロトタイプチェーンにあるものを含むオブジェクトのすべてのプロパティを反復処理しますが、その際に Object.prototype.hasOwnProperty() このメソッドは、オブジェクトが指定されたプロパティを自身のプロパティとして（継承されていない）持っているかどうかを示すブール値を返し、継承されたプロパティを除外するために使用します。