Angular / Typescript Radio Button 两种型号

Question

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

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

我有一个英雄列表：

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

然后我显示一个 select 列表如下：

<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

Answer 1

类似这样的东西有效https://stackblitz.com/edit/angular-ivy-acbft3?file=src%2Fapp%2Fapp.component.ts

虽然不是很理想（使用函数检查复选框的选中状态，同时使用默认更改检测）。我还将 person 上的 fav-heroes 属性更改为纯数字数组（带有字符串属性的对象数组与数字 id 不匹配）。

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

Angular / Typescript Radio Button 两种型号

Angular / Typescript Radio Button two models

data-binding

typescript

angular