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

보푸라기 오류 메시지 :

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

이 보푸라기 오류를 해결하는 방법에 대한 아이디어가 있습니까?

tslint가 지적한 실제 문제 를 설명 하기 위해 for ... in 문의 JavaScript 문서에서 인용 한 내용은 다음과 같습니다.

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

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

이를 해결하기 위해서는 객체 자체 속성에 대해서만 반복해야합니다. @Maxxx와 @Qwertiy에서 제안한 것처럼 두 가지 방법으로이 작업을 수행 할 수 있습니다.

첫 번째 해결책

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

여기서는 Object.Keys ()를 사용합니다. 루프가 제공하는 것과 동일한 순서로 주어진 객체의 자체 열거 가능 속성의 배열을 반환하는 메소드를 사용합니다 (차이 루프가 속성을 열거한다는 것의 차이점) 프로토 타입 체인).

두 번째 해결책

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

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

@Helzgate의 답변을 적용하는 깔끔한 방법은 'for .. in'을

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를 사용하십시오.

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에서 "rules"섹션에 추가하십시오.

"forin": false

그렇지 않으면 @Maxxx는 올바른 아이디어를 가지고 있습니다.

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

이 메시지는 사용을 피하는 것이 아닙니다 switch . 대신에 확인하기를 원합니다 hasOwnProperty. https://stackoverflow.com/a/16735184/1374488 에서 배경을 읽을 수 있습니다.