โครงสร้าง for ใน Angular

การวนลูปผ่านองค์ประกอบของอาร์เรย์สามารถทำได้โดยใช้โครงสร้าง @for

ลองทดสอบในทางปฏิบัติ สมมติว่าในคอมโพเนนต์ของเรามีอาร์เรย์:

app/app.component.tsexport class AppComponent {
  public arr: number[] = [1, 2, 3, 4, 5];
}

พิจารณาไวยากรณ์ของโครงสร้าง:

app/app.component.html@for () {
  แท็ก
}

ระบุอาร์เรย์ที่จะวนซ้ำและตัวแปรที่จะรับองค์ประกอบ:

app/app.component.html@for (elem of arr) {
  แท็ก
}

อย่างไรก็ตาม นี่ยังไม่ใช่ทั้งหมด สำหรับการทำงานที่ถูกต้องของ Angular เราต้องระบุคำสั่งพิเศษ track หลังจากนั้นเราต้องระบุค่าที่ไม่ซ้ำกันสำหรับแต่ละองค์ประกอบของอาร์เรย์ สิ่งนี้จำเป็นเพื่อให้ Angular สามารถทำงานกับ DOM ได้อย่างมีประสิทธิภาพมากขึ้น ลองใช้เลขดัชนีขององค์ประกอบอาร์เรย์เป็นค่าที่ไม่ซ้ำกันนี้ สำหรับสิ่งนี้เราต้องระบุตัวแปร $index ดังนั้น นี่คือรหัสสุดท้ายของเรา:

app/app.component.html@for (elem of arr; track $index) {
  <div>
    {{ elem }}
  </div>
}

app/app.component.tsexport class AppComponent {
  public arr: numbers[] = [1, 2, 3, 4, 5];
}