Svelte：每次更改绑定属性时如何阻止 {#await} 块刷新？

Question

我正在尝试使用从基于 Promise 的函数中获得的数据来初始化 <select/> 输入。输入初始化选项后（每个选项从已解析的数据中获取值和标签），属性绑定到 <select/>。

但每次我更改选项（使用属性绑定）时，{#await} 块内的所有内容都会重新加载（似乎它解决了相同的 Promise 并重置了选项）。

当我删除绑定时不会发生这种情况。

我尝试了以下方法：

尝试将属性绑定到 select。

`<select bind:value={selected_device}>...`

尝试绑定从列表中获取 selected 选项的事件。
```
`<select on:change={set_selected_device}>...`
```

尝试制作另一个按钮以获得 selected 选项。

<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);
  }

我是不是遗漏了一些重要的东西，或者这是一个错误？

Answer 1

恐怕这是一个错误：https://github.com/sveltejs/svelte/issues/2355

解决方法是在脚本中创建一个变量...

let promise = VoiceStreamingService.get_microhpones();

并等待它而不是表达式。

Answer 2

我试图在安装组件后解决承诺，然后将选项推送到 select 对象。

分享以下代码：

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);
    }
  })();
});

Svelte：每次更改绑定属性时如何阻止 {#await} 块刷新？

Svelte: How to stop the {#await} block from getting refreshed every time the bound attribute is changed?

svelte

svelte-component