Javascript Svelte：使用类指令突出显示表行不起作用

我最近开始研究Svelte，并想创建一个名为SelectorTable的组件，它允许我通过单击表中的行来 Select 它们.选定的行应以不同的 colored颜色 突出显示.

我试着用了class directive年的版本.

<script lang="ts">
    type ObjectKey = keyof any; 
    export let data: any[] = [];
    export let key = 'id' as ObjectKey;
    let selected: Set<ObjectKey> = new Set<ObjectKey>();


    function toggle(id: ObjectKey) {
        if (selected.has(id)) {
            selected.delete(id);
        } else {
            selected.add(id)
        }
        console.log(selected)
        console.log(selected.has(id))
    }
</script>

<table>
    <thead>
        <tr>
            {#each Object.keys(data[0]) as heading}
            <th>{heading}</th>
            {/each}
        </tr>
    </thead>
    <tbody>
        {#each Object.values(data) as row}
            <tr class:tr-selected={selected.has(row[key])} on:click={() => {toggle(row[key])}}>
                {#each Object.values(row) as cell}
                <td>{cell}</td>
                {/each}
            </tr>
        {/each}
    </tbody>
</table>

<style>
    table, th, td {
        border: 1px solid;
        border-collapse: collapse;
        margin-bottom: 10px;
    }
    tr:hover {
        background-color: red;
        cursor: pointer;
    }

    .tr-selected { 
        background-color: greenyellow;
    }
</style>

on:click功能toggle工作并且正确地添加或移除所选键.我遇到的问题是，即使是selected.has(row[key]) == true，所选行的背景 colored颜色 也不会改变.以下是使用键1两次单击行时的控制台输出.

> Set(1) {1} ------- SelectorTable.svelte:14 
> true ------------- SelectorTable.svelte:15
> Set(0) {size: 0} - SelectorTable.svelte:14
> false ------------ SelectorTable.svelte:15

首先将密钥添加到选定的集合中，然后再次将其移除.

那么，如果输出selected.has(row[key])为真，为什么CLASS指令不起作用，行的 colored颜色 不变呢？