Lỗi tslint / codelyzer / ng lint: Các câu lệnh cho (lỗi trong vụn) phải được lọc bằng một câu lệnh if

Thông báo lỗi lint:

src / app / detail / edit / edit.component.ts [111, 5]: các câu lệnh for (... trong ...) phải được lọc bằng câu lệnh if

Đoạn mã (Đây là một mã làm việc. Nó cũng có sẵn tại phần xác thực mẫu 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] + ' ';
        }
      }
    }

Bất kỳ ý tưởng làm thế nào để sửa lỗi lint này?

Để giải thích vấn đề thực tế mà tslint đang chỉ ra, một trích dẫn từ tài liệu JavaScript của ... trong câu lệnh :

Vòng lặp sẽ lặp lại trên tất cả các thuộc tính có thể đếm được của chính đối tượng và các đối tượng đó kế thừa từ nguyên mẫu của hàm tạo của nó (các thuộc tính gần hơn với đối tượng trong chuỗi nguyên mẫu ghi đè lên các thuộc tính của nguyên mẫu).

Vì vậy, về cơ bản, điều này có nghĩa là bạn sẽ nhận được các thuộc tính mà bạn có thể không mong muốn nhận được (từ chuỗi nguyên mẫu của đối tượng).

Để giải quyết điều này, chúng ta chỉ cần lặp lại trên các thuộc tính riêng của các đối tượng. Chúng tôi có thể làm điều này theo hai cách khác nhau (theo đề xuất của @Maxxx và @Qwertiy).

Giải pháp đầu tiên

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

Ở đây, chúng ta sử dụng phương thức Object.Keys () trả về một mảng các thuộc tính có thể đếm được của riêng một đối tượng cụ thể, theo cùng thứ tự được cung cấp bởi một vòng lặp for ... (sự khác biệt là vòng lặp for liệt kê các thuộc tính trong chuỗi nguyên mẫu là tốt).

Giải pháp thứ hai

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

Trong giải pháp này, chúng tôi lặp lại tất cả các thuộc tính của đối tượng bao gồm cả các thuộc tính trong chuỗi nguyên mẫu của nó nhưng sử dụng phương thức Object.prototype.hasOwnProperty () , trả về một boolean cho biết đối tượng có thuộc tính được chỉ định là thuộc tính riêng (không được kế thừa) hay không, để lọc các tài sản thừa kế ra.

Một cách gọn gàng hơn để áp dụng câu trả lời của @ Helzgate có thể thay thế 'cho .. trong' của bạn bằng

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

sử dụng 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] + ' ';
    });
  }
});

Nếu hành vi của (... trong ...) là chấp nhận được / cần thiết cho mục đích của bạn, bạn có thể nói với tslint để cho phép nó.

trong tslint.json, thêm phần này vào phần "quy tắc".

"forin": false

Mặt khác, @Maxxx có ý tưởng đúng với

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

Tôi nghĩ rằng tin nhắn này không phải là để tránh sử dụng switch. Thay vào đó nó muốn bạn kiểm tra hasOwnProperty. Nền có thể được đọc ở đây: https://stackoverflow.com/a/16735184/1374488