我正在尝试使用从基于Promise的函数获得的数据来初始化<select/>
输入。输入初始化选项后(每个选项都从解析的数据中获取值和标签),将属性绑定到<select/>
。
但是每次我更改选项(带有属性绑定)时,{#await}
块中的所有内容都会重新加载(好像它解析相同的Promise并重置选项)。
当我删除绑定时不会发生这种情况。
我尝试了以下方法:
尝试将属性绑定到选择。
`<select bind:value={selected_device}>...`
尝试绑定一个事件,该事件将从列表中获取选定的选项。
`<select on:change={set_selected_device}>...`
试图再按一次按钮以获取所选的选项。
<select>...</select>
<button on:click={set_selected_device}>Set</button>`
这是当前状态的代码段:
等待区:
<div class="device-select container">
{#await VoiceStreamingService.get_microhpones()}
{:then devices}
<select id="device-options">
<option selected disabled>Select an Option...</option>
{#each devices as device (device.deviceId)}
<option value={device.deviceId}>{device.label}</option>
{/each}
</select>
{:catch}
{/await}
<button on:click={set_selected_device}>Connect To</button>
</div>
set_selected_device函数:
function set_selected_device() {
let d = document.getElementById("device-options");
selected_device = d.options[d.selectedIndex].value;
console.log(selected_device);
}
我错过了一些重要的东西,还是一个错误?
答案 0 :(得分:1)
恐怕是一个错误:https://github.com/sveltejs/svelte/issues/2355
一种解决方法是在脚本中创建一个变量...
let promise = VoiceStreamingService.get_microhpones();
并等待它而不是表达式。
答案 1 :(得分:0)
一旦安装了组件,我试图解决诺言,然后将选项推送到选择对象。
共享下面的代码:
onMount(() => {
(async () => {
let select = document.getElementById("device-options");
try {
(await VoiceStreamingService.get_microhpones()).forEach(device => {
let option = document.createElement("option");
option.value = device.deviceId;
option.innerHTML = device.label;
select.appendChild(option);
});
} catch (e) {
console.log(e);
}
})();
});