แต่ละ
ใน LWC for:each เป็นคำสั่งที่ใช้กับแท็กเทมเพลต มันจะส่งคืนรายการจากข้อมูลที่กำหนด ต้องใช้พารามิเตอร์สองตัว เราต้องระบุข้อมูลใน สำหรับ: แต่ละ = {ข้อมูล} และ สำหรับ: รายการ =”ตัวแปร” รับรายการปัจจุบัน (จากตัววนซ้ำ) ที่ระบุด้วยตัวแปร ที่ สำหรับ:index=”index_var” เก็บดัชนีองค์ประกอบที่ระบุดัชนีองค์ประกอบปัจจุบัน
ไวยากรณ์:
มาดูวิธีการระบุ for:each directive ใน LWC (HTML Component) for:index เป็นทางเลือก
<เทมเพลตสำหรับ:each={data} สำหรับ:item= 'item_var' สำหรับ:ดัชนี= 'index_var' >
'1.0' ?>
<เวอร์ชัน API> 57.0
<เป้าหมาย>
2. ในตัวอย่างทั้งหมดที่เราจะพูดถึงในคู่มือนี้ ตรรกะจะถูกระบุเป็นโค้ด “js” หลังจากนั้น เราจะระบุภาพหน้าจอที่มีโค้ด “js” ทั้งหมด
ตัวอย่างที่ 1:
มาสร้างรายการที่มี 10 หัวข้อในไฟล์ “firstComponent.js” ใช้คำสั่ง for:each template และวนซ้ำรายการนี้ด้วยตัววนซ้ำ 'ย่อย' ระบุคีย์เป็นตัววนซ้ำนี้ภายในแท็กย่อหน้าและแสดงหัวเรื่อง
firstExample.html<แม่แบบ>
<ชื่อการ์ดสายฟ้า= “อาร์เรย์วิชา” >
<ศูนย์>
<เทมเพลตสำหรับ:each={subjects_array} สำหรับ:item= 'ย่อย' สำหรับ:ดัชนี= 'ดัชนี' >
{sub}
firstExample.js
// สร้าง subjects_array ที่เก็บ 10 วิชา
subjects_array = [ 'เอดับบลิว' , 'เซลส์ฟอร์ซ' , 'พีเอชพี' , 'ชวา' , 'หลาม' , 'เอชทีเอ็มแอล' , 'เจเอส' , 'ชวา' , 'ออราเคิล' , 'ค#' ];
รหัสทั้งหมด:
เอาท์พุท:
เพิ่มส่วนประกอบนี้ลงในหน้า 'บันทึก' ของวัตถุใด ๆ (เราเพิ่มลงในหน้า 'บันทึก' ของบัญชี) องค์ประกอบทั้ง 10 รายการจะแสดงบน UI
ตัวอย่างที่ 2:
ตอนนี้ เราสร้างอาร์เรย์ของอ็อบเจ็กต์ซึ่งก็คือ “id” โปรแกรม และพิมพ์ด้วย 10 เรคคอร์ดที่เกี่ยวข้องกับหัวเรื่อง สิ่งเหล่านี้ถูกวนซ้ำเพื่อรับโปรแกรมและประเภท คีย์คือ 'id' และค่าประเภทจะแสดงเป็นตัวหนา
SecondExample.html<แม่แบบ>
<ชื่อการ์ดสายฟ้า= “อาร์เรย์ของวิชา” >
<ศูนย์>
<เทมเพลตสำหรับ:each={array_of_objects} สำหรับ:item= 'อ็อบเจ' สำหรับ:ดัชนี= 'ดัชนี' >
{obj.program} - {obj.type}
SecondExample.js
// สร้าง array_of_objects ที่เก็บรายละเอียดของ 10 วิชา
array_of_objects = [{id: 1 ,โปรแกรม: 'เอดับบลิว' , พิมพ์: 'คลาวด์' },{รหัส: 2 ,โปรแกรม: 'เซลส์ฟอร์ซ' , พิมพ์: 'คลาวด์' },
{รหัส: 3 ,โปรแกรม: 'พีเอชพี' , พิมพ์: 'เว็บ' },{รหัส: 4 ,โปรแกรม: 'ชวา' , พิมพ์: 'เว็บ/ข้อมูล' },
{รหัส: 5 ,โปรแกรม: 'หลาม' , พิมพ์: 'ทั้งหมด' },{รหัส: 6 ,โปรแกรม: 'เอชทีเอ็มแอล' , พิมพ์: 'เว็บ' },
{รหัส: 7 ,โปรแกรม: 'เจเอส' , พิมพ์: 'เว็บ' },{รหัส: 8 ,โปรแกรม: '.สุทธิ' , พิมพ์: 'เว็บ/ข้อมูล' },
{รหัส: 9 ,โปรแกรม: 'ออราเคิล' , พิมพ์: 'ข้อมูล' },{รหัส: 10 ,โปรแกรม: 'ค#' , พิมพ์: 'ข้อมูล' }];
รหัสทั้งหมด:
เอาท์พุท:
คุณจะเห็นว่าโปรแกรมทั้งหมดแสดงบน UI พร้อมกับประเภทของโปรแกรม
ตัวอย่างที่ 3:
สร้างอาร์เรย์ที่ซ้อนกันของอ็อบเจ็กต์ (id โปรแกรม ประเภท และหัวข้อ) ที่นี่หัวข้อจะเก็บรายการองค์ประกอบอีกครั้ง ในส่วนแรก for:each คำสั่งเทมเพลต เราจะวนซ้ำอาร์เรย์ที่ซ้อนกันทั้งหมด ภายในเทมเพลตนี้ เราจะวนซ้ำหัวข้ออีกครั้งโดยใช้ตัววนซ้ำก่อนหน้า ต่อไป เราจะแสดงโปรแกรม ประเภท และหัวข้อในส่วนหลักของ: แต่ละเทมเพลต
ThirdComponent.html<แม่แบบ>
<ชื่อการ์ดสายฟ้า= “อาร์เรย์ของวิชา” >
<ศูนย์>
<เทมเพลตสำหรับ:each={data} สำหรับ:item= 'วาล' สำหรับ:ดัชนี= 'ดัชนี' >
<เทมเพลตสำหรับ:each={val.Topics} สำหรับ:item= 'วาล1' >
โปรแกรม: {val.program} - {val.type} หัวข้อ: {val.หัวข้อ
ThirdComponent.js
ข้อมูล = [{id: 1 ,โปรแกรม: 'เอดับบลิว' , พิมพ์: 'คลาวด์' , หัวข้อ:[ 'การแนะนำ' , “สิ่งสำคัญของ AWC” ]},
{รหัส: 2 ,โปรแกรม: 'เซลส์ฟอร์ซ' , พิมพ์: 'คลาวด์' , หัวข้อ:[ “ผู้ดูแลระบบ” , 'การพัฒนา' ]},
{รหัส: 3 ,โปรแกรม: 'พีเอชพี' , พิมพ์: 'เว็บ' , หัวข้อ:[ 'การแนะนำ' , 'PHP-MySQL' ]}];
รหัสทั้งหมด:
เอาท์พุท:
หัวข้อทั้งหมดจะแสดงพร้อมประเภทและหัวข้อ แต่ละวิชามีสองหัวข้อ
ตัวอย่างที่ 4:
มาทำซ้ำบันทึกที่มีอยู่ในออบเจ็กต์ 'บัญชี' ขั้นแรก ให้เขียนคลาส Apex ที่ส่งคืนรายการเรคคอร์ด (เมธอด returnAcc()) ที่รวมฟิลด์ ID บัญชี ชื่อ อุตสาหกรรม และการจัดอันดับจากออบเจ็กต์ Account Standard ในไฟล์ “js” เราเรียกใช้เมธอด returnAcc() จาก Apex (ผ่านคำสั่งนำเข้า) ภายในไฟล์connectedcallback() สิ่งนี้จะส่งคืนบัญชี สุดท้ายนี้ บัญชีเหล่านี้จะถูกระบุไว้ในคำสั่ง for:each เทมเพลตเพื่อรับชื่อบัญชีและอุตสาหกรรม
AccountData.apxcสาธารณะพร้อมคลาสการแชร์ AccountData {
@AuraEnabled(แคชได้=จริง)
รายการคงที่สาธารณะ <บัญชี> returnAcc(){
รายการ <บัญชี> รายการบัญชี = [เลือก Id, ชื่อ, อุตสาหกรรม, การจัดอันดับจากขีดจำกัดบัญชี 10 ];
ส่งคืนรายการบัญชี;
}
}
สุดท้ายComponent.html
<แม่แบบ>
<ชื่อการ์ดสายฟ้า= “แสดงรายการบัญชี” >
<คลาส div= 'slds-var-m-around_medium' >
<เทมเพลต if:true={accounts}>
<เทมเพลตสำหรับ:each={accounts} สำหรับ:item= 'account_rec' >
บัญชี: {account_rec.Name} อุตสาหกรรม: {account_rec.Industry}
