在#Each 块中仅显示 1 个元素的 Svelte 组件答案

【问题标题】：Show Svelte Component for Only 1 Element In #Each Block在#Each 块中仅显示 1 个元素的 Svelte 组件
【发布时间】：2020-05-04 20:11:43
【问题描述】：

我有一个#each 块，显示图像和文本。如果用户单击一个按钮，我想在该特定图像上显示一个组件，而不是所有图像。现在，我有类似以下的内容，所以#if loading，显示 LoadingSpinnger 组件。这会显示在所有图像上，而不仅仅是单击的图像。有没有办法在 div 中添加组件，使其不适用于所有图像？

 {#each things as thing}
        <div class="image">
          {#if loading}
            <LoadingSpinner />
          {/if}
          <img
            src={thing.p}
            id ={thing.id}  />
        </div>
      <div class="info">
        Name: {thing.n} Species: {thing.s}
      </div>
      <div class="button">
        <button on:click={addComponent()}>
          Button Text
        </button>
      </div>
  {/each}

【问题讨论】：

在我看来，您希望 LoadingSpinner 和图像位于一个单独的组件中，这样加载将仅应用于该图像
不确定我是否可以这样做，因为我使用唯一的 thing.id 作为图像源的一部分。所以它就像src: /img/users/{user.id}/{thing.id}/image。我不确定我是否想把所有这些都提取到一个组件中。

标签： javascript svelte svelte-component

【解决方案1】：

这是因为loading 变量未绑定到任何特定图像。

要跟踪每个thing 的加载状态，请使用以thing.id 为关键字的字典。

然后用thing.id检查loading字典：

{#each things as thing}
  {#if loading[thing.id]}
    <LoadingSpinner/>
  {:else}
    <img src={thing.src}/>
  {/if}
{/each}

【讨论】：

啊，是的，那行得通！我一直在加载正确或错误的想法，因为它也会切换其他东西。相反，我将 thing.id 加载到变量 thingLoading 中，然后使用 {#if loading && thingLoading === thing.id} 就可以了。感谢您的帮助！

【解决方案2】：

Joshnuss 的回答也有效，但我需要将加载变量保持为真/假值，因为它会切换其他变量。所以我只是添加了一个新变量thingLoading，并像这样使用它：

{#each things as thing}
    <div class="image">
      {#if loading && thingLoading === thing.id}
        <LoadingSpinner />
      {/if}
      <img
        src={thing.p}
        id ={thing.id}  />
    </div>
  <div class="info">
    Name: {thing.n} Species: {thing.s}
  </div>
  <div class="button">
    <button on:click={addComponent()}>
      Button Text
    </button>
  </div>
{/each}

【讨论】：