【LWC】 響應式根據記錄類型擷取選項清單的值

在某些場景下，一個對象的某個選項清單的值，會根據記類型的不同而設定為不同的值。我們可以使用标準API，在元件中友善快捷地擷取它們，并且根據不同的記錄類型響應式地重新擷取它們的值。

Show Me The Code

在HTML檔案中，我們會使用标準元件

<lightning-dual-listbox>

渲染出選項清單（多選）

• options 選項
• required-options 必選的選項
• value 目前多選的值
• source-label 左側可選項目
• selected-label 右側已選項目

在JS檔案中，我們需要

1. 擷取記錄類型Id
2. 擷取特定記錄類型的選項清單值
3. 将值設定為選項清單的選項

// 導入标準API後去選項清單方法
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
// 導入擷取記錄類型Id方法
import { getRecord } from "lightning/uiRecordApi";
const FIELDS = ['Object__c.RecordTypeId']
export default class PickList extends LightningElement {
@track options
@track value
@track recordTypeId
@wire(getRecord, { recordId: '$recordId', fields: ORDER_FIELDS })
wiredRecordInfo({ error, data }) {
  if (data) {
    this.recordTypeId = data.fields.RecordTypeId.value
  }
@wire(getPicklistValuesByRecordType, { objectApiName: 'Object__c', recordTypeId: '$recordTypeId' })
    propertyOrFunction({error, data}) {
        if (data) {
            if (!!data && !!data.picklistFieldValues && !!data.picklistFieldValues.PickList__c) {
                this.options = data.picklistFieldValues.PickList__c.values
            }
        } else if (error) {
            console.error(error)
        }
    }
}
           

在

getPicklistValuesByRecordType

的傳回值中，我們會收到所有選項清單類型的值，是以我們需要篩選出我們需要的特定的（

PickList__c

）選項清單

!!data && !!data.picklistFieldValues && !!data.picklistFieldValues.PickList__c

，并且，這個屬性的值中已經包含了

label

和

value

的值了，是以我們不需要重建對象清單，直接将它指派給

this.options

即可。

可能有人會擔心，

getRecord

中擷取記錄類型Id，如果

getPicklistValuesByRecordType

先執行了，會不會取不到值？其實不用擔心，在

getPicklistValuesByRecordType

中我們提供記錄類型的值的時候使用了

$

符号，隻要

recordTypeId

有變化，這個方法就會重新去拉取正确的值。