Svelte中如何通过select元素值获取数组内元素的属性？

先梳理你代码里的核心问题，再给出修正后的完整实现：

问题分析 #

• 类型不匹配：selected 初始值是字符串 '0'，但用户数组里的 id 是数字类型，直接匹配会找不到对应用户
• 错误的数组取值语法：users[id={selected}] 不是合法的JavaScript写法，要定位对应id的用户，需用数组的find()方法
• 模板渲染错误：下拉选项里的{user.category}是不存在的属性，应该改成{user.name}
• 未实现动态更新：你的age变量是初始赋值，不会随着selected变化自动更新，需要用Svelte的反应式声明实现联动
• 未处理无age属性的情况：第二个用户只有price没有age，需要做容错处理避免报错

修正后的代码 #

<script lang="ts">
  import Users from './lib/Users.svelte';

  interface User {
    id: number;
    name: string;
    age?: string; // 设为可选属性，兼容无age的用户
    price?: string;
  }

  const users: User[] = [
    {
      id: 1,
      name: 'Andrew',
      age: '39',
    },
    {
      id: 2,
      name: 'David',
      price: '80',
    },
  ];

  let selected = '0';
  // 用Svelte反应式声明，selected变化时自动更新选中用户
  $: selectedUser = users.find(user => user.id === Number(selected));
  // 可选链+空值合并，处理用户不存在或无age的情况
  $: age = selectedUser?.age ?? '无年龄信息';
</script>

<div class="min-h-screen bg-slate-800 text-white">
  <main class="max-w-screen-rs mx-auto">
    <select bind:value={selected} class="bg-green-800 text-white" id="userSelect" name="userSelect" size="1">
      <option value="0" selected>Select a user</option>
      {#each users as user}
        <option value={user.id}>{user.name}</option>
      {/each}
    </select>
    <!-- 可直接渲染年龄测试效果 -->
    <p class="mt-4">选中用户的年龄：{age}</p>
  </main>
</div>

关键说明 #

1. 类型转换：用Number(selected)把字符串类型的选中值转为数字，和用户id类型匹配才能正确查找
2. 反应式联动：$: 是Svelte的反应式标记，只要依赖的selected变化，selectedUser和age就会自动重新计算
3. 容错处理：selectedUser?.age用可选链避免用户不存在时报错，?? '无年龄信息'在无age属性时显示默认文本
4. 模板修正：把错误的user.category改成user.name，正确渲染用户名

内容的提问来源于stack exchange，提问作者user3240445