<lightning-input-field>がLWCのチェックボックスの値を設定しないのはなぜですか?

Aug 17 2020

LWCのデータをラッパークラスから取得しています。そのデータでは、オブジェクトAPI名、フィールドAPI名、およびフィールドに存在する値を文字列の形式で取得します。ラッパークラスからデータを繰り返し処理し、を使用してユーザーから入力を受け取ります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文字列の形式で提供されます。このコードは、チェックボックスを除くすべてのフィールドで機能します。またはがfilterValue含まれていても、UIのチェックボックスには同じことが反映されません。デフォルトでは、に存在する値に関係なく、チェックボックスはUIでチェックされた状態で表示されます。truefalsefilterValue

これは、チェックボックスがのvalue属性から値を取得していないことを意味しますlightning-input-field。また、チェックボックスはUIでデフォルトで常にチェックされた状態で表示されます。デフォルトでチェックを外したい。なぜこれが起こっているのか理解できません。

filterValue文字列だからですか?-他のすべてのフィールドで使用されているため、文字列である必要があります。

それとも、value属性の代わりにchecked属性を使用しているからですか?-そのようなchecked属性がないというエラーが発生しました。

助けてください。ありがとう!😄

回答

4 PhilW Aug 17 2020 at 20:59

おそらくJavaScriptの型変換ルールが原因です。文字列は次の方法でブール値に変換されます。

  • 未定義、null、または空の文字列(つまり、「」)は次のようになります。 false
  • 上記のいずれでもない文字列は、 true

したがって、文字列「true」と「false」は両方ともtrueブール値になります。これを解決するには、filterValueの生成方法または使用方法を変更する必要があります。たとえば、filterValueがfalseの場合はnullに設定され、それ以外の場合は「true」に設定されていることを確認します。