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