ปัญหาหลักที่เกี่ยวข้องกับการใช้คำสั่ง ngFor กับดัชนีคือมันสามารถนำไปสู่ผลลัพธ์ที่ไม่คาดคิดเมื่อข้อมูลถูกทำซ้ำมากกว่าการเปลี่ยนแปลง เนื่องจากดัชนีไม่ได้รับการอัพเดตโดยอัตโนมัติเมื่อมีการเพิ่มหรือลบรายการออกจากอาร์เรย์ ดังนั้นหากมีการเพิ่มรายการใหม่ที่ดัชนี 0 รายการอื่นๆ ทั้งหมดจะมีการเลื่อนดัชนีลงทีละรายการ ซึ่งอาจนำไปสู่การแสดงข้อมูลที่ไม่ถูกต้องในมุมมองของคุณหรือพฤติกรรมที่ไม่คาดคิดในแอปพลิเคชันของคุณ
<ul>
<li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>
1. โค้ดบรรทัดนี้สร้างรายการที่ไม่มีลำดับ
2. คำสั่ง *ngFor ใช้เพื่อวนซ้ำอาร์เรย์รายการและแสดงแต่ละรายการในรายการ
3. คีย์เวิร์ด let ใช้ในการประกาศตัวแปรชื่อ “item” ซึ่งเก็บ item ปัจจุบันในการวนซ้ำ
4. คำหลัก let ยังใช้ในการประกาศตัวแปรชื่อ “i” ซึ่งเก็บดัชนีของรายการปัจจุบันในการวนซ้ำของลูป
5. บรรทัดนี้แสดงแต่ละรายการในรายการด้วยหมายเลขดัชนี (เริ่มจาก 0)
เชิงมุมคืออะไร
Angular เป็นเฟรมเวิร์กแอปพลิเคชันเว็บส่วนหน้าแบบโอเพ่นซอร์สที่ใช้ JavaScript ซึ่งดูแลโดย Google และชุมชนของบุคคลและองค์กรเป็นหลัก เพื่อจัดการกับความท้าทายมากมายที่พบในการพัฒนาแอปพลิเคชันหน้าเดียว ส่วนประกอบ JavaScript ช่วยเสริม Apache Cordova ซึ่งเป็นเฟรมเวิร์กที่ใช้สำหรับการพัฒนาแอพมือถือข้ามแพลตฟอร์ม มีจุดมุ่งหมายเพื่อลดความซับซ้อนของทั้งการพัฒนาและการทดสอบแอปพลิเคชันดังกล่าวโดยจัดเตรียมเฟรมเวิร์กสำหรับสถาปัตยกรรม model–view–controller (MVC) และ model–view–viewmodel (MVVM) ฝั่งไคลเอ็นต์ พร้อมด้วยส่วนประกอบที่ใช้กันทั่วไปในแอปพลิเคชันอินเทอร์เน็ตที่หลากหลาย
ngFor องค์ประกอบ
NgFor เป็นคำสั่งโครงสร้างเชิงมุมที่ช่วยให้เราสามารถวนซ้ำข้อมูลและสร้างเทมเพลตสำหรับแต่ละรายการในอาร์เรย์หรือวัตถุ ใช้เพื่อทำซ้ำองค์ประกอบ HTML ที่กำหนดตามจำนวนครั้งที่กำหนด สามารถใช้ NgFor เพื่อแสดงข้อมูลจากอาร์เรย์ อ็อบเจกต์ หรือสตริง นอกจากนี้ยังสามารถใช้เพื่อสร้างองค์ประกอบ HTML ตามค่าของอาร์เรย์หรือวัตถุ โดยทั่วไปแล้ว NgFor จะใช้ร่วมกับคำสั่งเชิงมุมอื่นๆ เช่น ngIf และ ngSwitch
วิธีรับดัชนีขององค์ประกอบ ngFor
คุณสามารถใช้คำหลักดัชนีเพื่อรับดัชนีขององค์ประกอบในลูป ngFor ไวยากรณ์สำหรับสิ่งนี้มีดังนี้:
ในตัวอย่างนี้ ตัวแปร “i” จะมีดัชนีปัจจุบันของลูป จากนั้นคุณสามารถใช้ตัวแปรนี้เพื่อเข้าถึงหรือแก้ไของค์ประกอบในรายการของคุณ
