ข้อผิดพลาด tslint / codelyzer / ng lint: คำสั่ง“ for (… in …)” ต้องถูกกรองด้วยคำสั่ง if”

ข้อความแสดงข้อผิดพลาดผ้าสำลี:

src / app / detail / edit / edit.component.ts [111, 5]: สำหรับคำสั่ง (... 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 กำลังชี้ไปอ้างจากเอกสาร JavaScript ของคำสั่ง for ... in :

การวนซ้ำจะวนซ้ำไปตามคุณสมบัติที่นับได้ทั้งหมดของวัตถุเองและสิ่งที่สืบทอดมาจากต้นแบบของตัวสร้าง (คุณสมบัติที่ใกล้กับวัตถุในคุณสมบัติต้นแบบลูกโซ่จะแทนที่คุณสมบัติของต้นแบบ)

ดังนั้นโดยทั่วไปสิ่งนี้หมายความว่าคุณจะได้รับคุณสมบัติที่คุณอาจไม่ได้รับ (จากเชนต้นแบบของวัตถุ)

ในการแก้ปัญหานี้เราจำเป็นต้องวนซ้ำคุณสมบัติของวัตถุเท่านั้น เราสามารถทำได้สองวิธีที่แตกต่างกัน (ตามที่แนะนำโดย @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] + ' ';
    });
  }
});

หากพฤติกรรมของสำหรับ (... ใน ... ) เป็นที่ยอมรับ / จำเป็นสำหรับวัตถุประสงค์ของคุณคุณสามารถบอก tslint เพื่ออนุญาต

ใน tslint.json เพิ่มส่วนนี้ในส่วน "กฎ"

"forin": false

มิฉะนั้น @Maxxx มีความคิดที่ถูกต้องด้วย

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

switchผมคิดว่าข้อความนี้ไม่ได้เกี่ยวกับการหลีกเลี่ยงการใช้งาน hasOwnPropertyแต่มันต้องการให้คุณตรวจสอบ พื้นหลังสามารถอ่านได้ที่นี่: https://stackoverflow.com/a/16735184/1374488