เหตุใด <lightning-input-field> จึงไม่กำหนดค่าของช่องทำเครื่องหมายใน LWC

Aug 17 2020

ฉันได้รับข้อมูลใน LWC ของฉันจากคลาส Wrapper ในข้อมูลนั้นฉันได้รับชื่อ object API ชื่อฟิลด์ API และค่าที่ปรากฏในฟิลด์ในรูปแบบของ Strings ฉันทำซ้ำข้อมูลจากคลาส wrapper และรับข้อมูลจากผู้ใช้โดยใช้lightning-input-field.

รหัส:

<!-- iterate over wrapper list -->
<template iterator:item={wrapperListCopy}>
     <tr key={item.value.index}>
           <td>
                <lightning-record-edit-form object-api-name={objectApiName}>
                     <lightning-input-field id={item.value.index} 
                                            field-name={item.value.inputFieldName} 
                                            value={item.value.filterValue}>
                     </lightning-input-field>
                </lightning-record-edit-form>
           </td>
     </tr>
</template>

filterValueมาในรูปแบบ String รหัสนี้ใช้ได้กับทุกช่องยกเว้นช่องทำเครื่องหมาย แม้ว่าจะfilterValueมีtrueหรือfalseเหมือนกันก็ไม่ปรากฏในช่องทำเครื่องหมายใน UI โดยค่าเริ่มต้นช่องทำเครื่องหมายปรากฎขึ้นมาตรวจสอบเกี่ยวกับ UI filterValueโดยไม่คำนึงถึงปัจจุบันค่าใน

ก็หมายความว่าช่องจะไม่ได้รับความคุ้มค่าจากแอตทริบิวต์ของvalue lightning-input-fieldนอกจากนี้ช่องทำเครื่องหมายจะปรากฏขึ้นโดยเลือกโดยค่าเริ่มต้นใน UI เสมอ ฉันต้องการให้ยกเลิกการเลือกโดยค่าเริ่มต้น ฉันไม่เข้าใจว่าเหตุใดจึงเกิดขึ้น

เป็นเพราะfilterValueString? - ฉันต้องการให้เป็นสตริงเพราะช่องอื่น ๆ ทั้งหมดใช้มัน

หรือเป็นเพราะฉันใช้valueแอตทริบิวต์แทนcheckedแอตทริบิวต์? - ฉันได้รับข้อผิดพลาดแจ้งว่าไม่มีcheckedแอตทริบิวต์ดังกล่าว

กรุณาช่วย. ขอบคุณ! 😄

คำตอบ

4 PhilW Aug 17 2020 at 20:59

อาจเป็นเพราะกฎการแปลงประเภทของ JavaScript สตริงถูกแปลงเป็นบูลีนด้วยวิธีต่อไปนี้:

  • สตริงที่ไม่ได้กำหนดเป็นโมฆะหรือว่างเปล่า (เช่น "") จะกลายเป็น false
  • สตริงที่ไม่ใช่สตริงข้างต้นจะกลายเป็น true

ดังนั้นสตริง "จริง" และ "เท็จ" ทั้งสองจึงกลายtrueเป็นบูลีน คุณต้องเปลี่ยนวิธีสร้างหรือใช้ filterValue เพื่อแก้ไขปัญหานี้ ตัวอย่างเช่นตรวจสอบให้แน่ใจว่า filterValue ถูกตั้งค่าเป็น null สำหรับ false และเป็น "true" ไม่เช่นนั้น