Angular / Typescript Radio Button 两种型号答案

【问题标题】：Angular / Typescript Radio Button two modelsAngular / Typescript Radio Button 两种型号
【发布时间】：2022-01-07 21:30:32
【问题描述】：

我不太知道如何表达我的问题，也许这就是我找不到解决方案的原因。

我有一个 ngfor，但随后需要绑定另一个数据列表以显示选中的选项：

我有一个英雄列表：

[
    {id: 1, name:'Superman'},
    {id: 2, name:'Batman'},
    {id: 5, name:'BatGirl'},
    {id: 3, name:'Robin'},
    {id: 4, name:'Flash'}
];

然后我显示如下选择列表：

<div class="form-check" *ngFor="let p of heroes">
  <input class="form-check-input" type="checkbox" value="{{p.id}}" id="{{p.id}}">
  <label class="form-check-label" for="{{p.id}}">
    {{p.name}}
  </label>
</div>

然后我将拥有他们最喜欢的超级英雄的人作为另一个列表：

{id: 1, name: 'Jack', favoiriteSuperHeoros: [ {id: "1"} , {id: "2"} ]}

如何让数据绑定到复选框？

这是我正在研究的地方：https://stackblitz.com/edit/angular-ivy-muaxwi?file=src/app/app.component.html

【问题讨论】：

英雄列表显示在用户个人资料（例如 Jack）上，您想设置用户标记为收藏的那些英雄（双向？）的复选框，是对吗？
stackblitz 只是默认的 stacblitz。
@GunnarB。那是正确的。我已经更新了 stackblitz 链接，请让我知道它是否有效。
@AT82 我已经更新了链接并保存了stackblitz :)

标签： angular typescript data-binding

【解决方案1】：

这样的事情https://stackblitz.com/edit/angular-ivy-acbft3?file=src%2Fapp%2Fapp.component.ts

虽然它不是很理想（使用一个函数来检查复选框的选中状态，同时使用默认更改检测）。我还将人员上的 fav-heroes 道具更改为纯数字数组（带有字符串道具的对象数组与数字 ID 不匹配）。

另一个选择是创建一个映射的英雄列表（添加一个选中的属性）并绑定它。这样，您只需在该对象上切换一个布尔值。这可以在初始化时设置一次，然后仅在更改时设置。这减少了重新计算的次数。

【讨论】：