こんにちは、アンダーソンです。
今回はlightning-comboboxを実装してみました。
LWCのスーパーバッチで初めて使ったので使い方をまとめておこうと思います。
lightning-comboboxの使い方
lightning-comboboxは見た目が下記のようなものになります。

いわゆる選択リストです。
まず公式のドキュメントに載っているやり方で、
これを作ってみると、下記のようなコードになります。
<template>
<lightning-combobox
name="progress"
label="Status"
value={value}
placeholder="Select Progress"
options={options}
onchange={handleChange} ></lightning-combobox>
<p>Selected value is: {value}</p>
</template>
import { LightningElement } from 'lwc';
export default class ComboboxBasic extends LightningElement {
value = 'inProgress';
get options() {
return [
{ label: 'New', value: 'new' },
{ label: 'In Progress', value: 'inProgress' },
{ label: 'Finished', value: 'finished' },
];
}
handleChange(event) {
this.value = event.detail.value;
}
}
これでもOKなんですが、これだと動的に値を取得できないという難点が残ります。
LWCのスーパーバッチでは、あるオブジェクトが種別を表しており、
そこにぶら下がる形で別のオブジェクトがあるというものでした。
すなわち、種別が増えたら増える必要があります。
これあたりまえに要件としてあると思いますし、
増えるたびにコードを編集するのはめんどくさいので
動的に設置したいところですよね。
Apexから取得した値をセットする
上記を解決するために、Apexで取得した値を選択リストとして使うことができます。
まず、Apexでレコードを取得するメソッドを用意します。
@AuraEnabled(Cacheable=true)
public static List<Test1__c> getTestName(){
return [
SELECT
Id,
Name
FROM Test1__c
order by Name
];
}
次にこれを呼び出した際に選択リストとして用意した、変数にセットしていきます。
@wire (getTestName)
testName ({ data, error }) {
if ( data ) {
this.selectOptions = data.map(rec => {
return {
label: rec.Name,
value: rec.Id
};
});
}
if ( error ) {
this.selectOptions = undefined;
this.error = error;
}
}
それをHTML側で表示させるだけになります。

これでオブジェクトに種別が増えたとしても取得できます。
いかがでしたでしょうか。
僕はApexから返却された値がループされるので、
一つづつ選択リストに格納していたらずっとエラーで、泣いてました笑
ぜひこれから作成される方の参考になれば幸いです!