การวนซ้ำด้วย @for
แสดงผลรายการด้วย @for และนิพจน์ track
การวนซ้ำด้วย @for เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การวนซ้ำด้วย for
บล็อก at-for ทำซ้ำเนื้อหาสำหรับแต่ละรายการในชุดข้อมูล โดยมาแทนคำสั่ง star-ngFor แบบเก่าและจำเป็นต้องมีนิพจน์ track
ไวยากรณ์ for พื้นฐาน
เขียนเครื่องหมาย @ ตามด้วยคำว่า for จากนั้น item of items และส่วนคำสั่ง track ที่จำเป็น ซึ่งระบุคีย์ที่ไม่ซ้ำกัน
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }เหตุผลที่ต้องมี track
นิพจน์ track บอก Angular ว่าจะระบุแต่ละรายการข้ามการเปลี่ยนแปลงอย่างไร ทำให้สามารถนำโหนด DOM กลับมาใช้แทนการสร้างใหม่ ซึ่งช่วยเพิ่มประสิทธิภาพได้อย่างมาก
การติดตามด้วยอัตลักษณ์
หากรายการไม่มี id ที่คงที่ เช่น รายการสตริงพื้นฐาน คุณสามารถติดตามด้วยตัวรายการนั้นเองได้
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }บล็อก empty
บล็อก at-empty จะแสดงผลเมื่อชุดข้อมูลไม่มีรายการ โดยวางต่อจากวงเล็บปีกกาปิดของบล็อก at-for
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }ตัวแปรตามบริบท
ภายในบล็อก at-for จะมีตัวแปรที่เป็นประโยชน์ให้ใช้ ได้แก่ index, count, first, last, even และ odd โดยเก็บค่าเหล่านี้ด้วย let
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }ตัวแปร index
ค่า dollar-index ระบุตำแหน่งของรายการปัจจุบันโดยเริ่มนับจากศูนย์ และมักตั้งชื่อใหม่เป็นตัวแปรภายในดังตัวอย่างก่อนหน้านี้
first และ last
ค่าบูลีน dollar-first และ dollar-last จะเป็นจริงสำหรับรายการแรกและรายการสุดท้าย เหมาะสำหรับใช้กำหนดสไตล์หรือตัวคั่น
even และ odd
ค่าบูลีน dollar-even และ dollar-odd ช่วยกำหนดสไตล์แถวสลับกัน
การวนซ้ำผ่านสัญญาณ
ชุดข้อมูลสามารถมาจากสัญญาณได้ เพียงเรียกใช้สัญญาณนั้นในนิพจน์ for
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }ประโยชน์ด้านประสิทธิภาพ
เนื่องจาก track เป็นสิ่งจำเป็น at-for แบบใหม่จึงทำงานเร็วกว่า star-ngFor ที่ไม่มี trackBy เพราะ Angular รู้วิธีจับคู่รายการกับโหนด DOM อยู่เสมอ
ตรวจสอบอย่างรวดเร็ว: การวนซ้ำ
ข้อกำหนดของบล็อก for
สรุป: การวนซ้ำ
คุณได้เรียนรู้บล็อก at-for พร้อมนิพจน์ track ที่จำเป็น บล็อก at-empty สำหรับชุดข้อมูลว่าง และตัวแปรตามบริบท เช่น index, first, last, even และ odd บล็อกนี้มาแทน star-ngFor ขั้นถัดไป: การสลับด้วย at-switch
คำถามที่พบบ่อย
บทเรียน “การวนซ้ำด้วย @for” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การวนซ้ำด้วย @for” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การวนซ้ำด้วย @for”
แสดงผลรายการด้วย @for และนิพจน์ track คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การวนซ้ำด้วย @for” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ