Svelte: Как остановить обновление блока {#await} при каждом изменении связанного атрибута?

Question

Я пытаюсь инициализировать ввод <select/> данными, полученными из функции, основанной на Promise. После того как ввод инициализирует параметры (каждый параметр получает значение и метку из разрешенных данных), атрибут связывается с <select/>.

Но каждый раз, когда я меняю опцию (с привязкой атрибута), все внутри блока {#await} перезагружается (похоже на то, что он разрешает одно и то же Обещание и сбрасывает опции).

Этого не происходит, когда я снимаю привязку.

Я пробовал следующее:

• Попытка привязки атрибута к выбору.

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

Я что-то упустил или это ошибка?

Answer 1

Боюсь, это ошибка: https://github.com/sveltejs/svelte/issues/2355

Обходной путь - создать переменную в вашем скрипте ...

let promise = VoiceStreamingService.get_microhpones();

и ждите этого вместо выражения.

Answer 2

Я попытался выполнить обещание, как только компонент был смонтирован, а затем выдвинул опции для выбранного объекта.

Совместное использование кода ниже:

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