web-dev-qa-db-ja.com

tslint/codelyzer/ng lintエラー： "for（... in ...）ステートメントはifステートメントでフィルタリングする必要があります"

リントエラーメッセージ：

src/app/detail/edit/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] + ' ';
        }
      }
    }

どのようにこのリントエラーを修正するには任意のアイデア？

angularangular2-formsangular-clitslint
156
choopage - Jek Bao

@ Helzgateの返信を適用するためのより良い方法は、おそらくあなたの 'for .. in'を次のように置き換えることです

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

実際の問題を説明するために そのtslintが指摘していること - for ...ステートメントのJavaScriptドキュメントからの引用 ：

このループは、オブジェクト自体の列挙可能なすべてのプロパティと、そのオブジェクトがそのコンストラクタのプロトタイプから継承するもの（プロトタイプチェーンでオブジェクトに近い方のプロパティがプロトタイプのプロパティをオーバーライドする）を繰り返し処理します。

したがって、基本的に、これは、オブジェクトのプロトタイプチェーンからは取得できない可能性があるプロパティを取得することを意味します。

これを解決するには、オブジェクト自身のプロパティに対してのみ反復する必要があります。これを2つの方法で行うことができます（@Maxxxと@Qwertiyで推奨されているとおり）。

最初の解決策

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

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

第二の解決策

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

このソリューションでは、プロトタイプチェーン内のものも含め、オブジェクトのすべてのプロパティを繰り返しますが、 Object.prototype.hasOwnProperty（） メソッドを使用します。継承されたプロパティを除外するためのproperty。

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

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

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