Javascript 苗条应用程序错误：将视图中的字符串转换为布尔值失败

在一款小巧的应用程序中，我拥有以下国家：

let countries = [
    {
        name:"Alegeria",
        status: "1"
    },
    {
        name:"Bulgaria",
        status :"0"
    }
]

请注意，

status

属性是一个字符串。我以这种方式迭代数组：

{#if countries.length > 0}
<table class="table">
    <thead>
        <tr>
            <th>Country</th>
            <th class="text-right">Status</th>
        </tr>
    </thead>
    <tbody>
        {#each countries as c}  
        <tr>
            <td>{c.name}</td>
            <td class="text-right"><Switch bind:checked={Boolean(Number(c.status))} /></td>
        </tr>
    {/each}
    </tbody>
</table>
{:else}
<p class="alert alert-danger">No countries found</p>
{/if}

{#if countries.length>0}
国家
地位
{#每个国家都是c}
{c.name}
{/每个}
{:else}
未找到任何国家/地区
{/if}

如您所见，我尝试使用

boolean（Number（c.status））

将

status

属性的值转换为布尔值

我得到的不是所需的转换，而是错误：

只能绑定到标识符（例如
foo
）或成员表达式，如所示

我做错了什么？
正如错误中所说，您只能
绑定到标识符或成员表达式（即变量）

这是因为
bind
是双向的，如果您对其应用了
Boolean（Number（（））
，当有人更改该输入时，svelte不知道如何撤消这些函数以将数据“保存”回绑定到的变量中

如果您不能将状态变量更改为布尔值（更好的解决方案，正如其他答案所建议的那样），则需要手动执行此双向更新。删除
绑定
，只需选中
即可={boolean（Number（c.status））}
，并处理输入的
更改
事件，将true/false转换回“1”或“0”，并将其保存到状态

使用：

及

handleClick（c）}/>

查看它在
中的工作情况我认为问题在于该函数创建了一个新对象，您无法绑定到该对象，因为它不再被引用。您可以使用以下代码直接绑定到
国家的值数组
：

{#each countries as c, index}   
    <tr>
        <td>{c.name}</td>
        <td class="text-right"><Switch bind:checked={countries[index].status} /></td>
    </tr>
{/each}

{#每个国家作为c，索引}
{c.name}
{/每个}

改变的是现在使用
#each
循环的
index
参数绑定到countries数组的变量。请注意，为了使其正常工作，您需要将状态值更改为
true
或
false
。否则它仍将工作，但初始值将为空方法是
true
如果您只想将值传递给
开关
组件，只需删除
绑定：
如下：

<td class="text-right"><Switch checked={Boolean(Number(c.status))} /></td>



如果您想通过switch组件更新countries模型，我建议转发click事件并使用简单的click handler方法，如下所示：

    function onClick(event, country) {
        countries = countries.map(c => {
            if (c.name ===  country.name) {
                c.status = event.target.checked ? '1' : '0';
            }
            return c;
        })
    }

    ...

    <td class="text-right"><Switch checked={c.status === '1'} on:click={(e) => onClick(e, c)}/></td>

函数onClick（事件、国家）{
国家=国家。地图（c=>{
如果（c.name==country.name）{
c、 状态=event.target.checked？'1'：'0'；
}
返回c；
})
}
...
onClick（e，c）}/>

REPL上的完整代码：
为什么不直接绑定到国家/地区状态？它必须是0和1而不是false和true吗？@Gh05d我仍然需要转换字符串
“0”
和
“1”
对字符串
0
和
1
进行编号。因此，我也会遇到同样的问题。我需要更改
国家
数组（数据必须保存在数据库中）。我想我无法将
绑定
。我的意思是您可以不绑定就更改它。（用一个工作代码示例更新了答案）我使用的是Switch not CheckboxWell您没有提到如何定义
Switch
，因此我无法在这方面帮助您。我只是在为您编写的演示代码中使用了一个复选框，以便它可以工作，您可以看到一个手动定义变量和输入框之间绑定的示例。
<td class="text-right"><Switch checked={Boolean(Number(c.status))} /></td>

    function onClick(event, country) {
        countries = countries.map(c => {
            if (c.name ===  country.name) {
                c.status = event.target.checked ? '1' : '0';
            }
            return c;
        })
    }

    ...

    <td class="text-right"><Switch checked={c.status === '1'} on:click={(e) => onClick(e, c)}/></td>