tslint / codelyzer / ng lint 오류: "for (... in...) 문은 if 문으로 필터링해야 합니다."

tslint / codelyzer / ng lint 오류: "for (... in...) 문은 if 문으로 필터링해야 합니다."

린트 오류 메시지:

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

이 보풀 오류를 어떻게 고칠지 아십니까?

tslint가 지적하고 있는 실제 문제를 설명하기 위해 for...의 JavaScript 문서에서 인용한 문장:

루프는 객체 자체의 모든 열거 가능한 속성과 객체가 생성자의 프로토타입에서 상속되는 속성(프로토타입 체인의 객체에 더 가까운 속성이 프로토타입의 속성을 재정의함)을 반복합니다.

따라서 기본적으로 이는 (객체의 프로토타입 체인에서) 얻을 수 없을 것으로 예상되는 속성을 얻을 수 있음을 의미합니다.

이 문제를 해결하려면 개체 자체 속성에 대해서만 반복하면 됩니다.@Maxxx와 @Qwerty에서 제안한 바와 같이 두 가지 방법으로 이 작업을 수행할 수 있습니다.

제1해

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

여기서는 객체를 활용합니다.for...in 루프에서 제공하는 순서와 동일한 순서로 지정된 개체의 고유한 열거 가능한 속성 배열을 반환하는 Keys() 메서드입니다(차이점은 for-in 루프가 프로토타입 체인에서도 속성을 열거한다는 것입니다).

제2해

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

이 솔루션에서는 프로토타입 체인의 속성을 포함하여 개체의 모든 속성을 다시 작성하지만 Object.prototype.hasOwnProperty() 메서드를 사용합니다. Object.prototype.hasOwnProperty() 메서드는 개체가 지정된 속성을 소유(상속되지 않음) 속성으로 가지고 있는지 여부를 나타내는 부울을 반환하여 상속된 속성을 필터링합니다.

@Helzgate의 답변을 적용할 수 있는 더 나은 방법은 다음을 위해 귀하의 를 대체하는 것입니다.와 함께 있는.

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)) {

개체를 사용합니다.키:

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

for(... in...)의 동작이 허용/필요한 경우 tslint에 허용하도록 요청할 수 있습니다.

tslint.json에서, 이것을 "slint" 섹션에 추가합니다.

"forin": false

그렇지 않으면, @Maxxx는 올바른 생각을 가지고 있습니다.

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

나는 이 메시지가 사용을 피하는 것에 관한 것이 아니라고 생각합니다.switch대신에 그것은 당신이 확인하기를 원합니다.hasOwnProperty배경은 https://stackoverflow.com/a/16735184/1374488 에서 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/40770425/tslint-codelyzer-ng-lint-error-for-in-statements-must-be-filtere