Question

在我的ngFor循环中，我添加了多个复选框，全部都添加了。但是表现得像radio按钮。我一次只能选择一个复选框。这有什么不对？任何人帮助我？

这是我的模板：

<div class="vas-obs vas-selected" *ngFor="let vas of vasDatas;let i=index;">
          <div class="vas-obs-text checkbox-container">{{appProps[vas.title]}}
            <input type="checkbox" checked="checked" name="vas{{i}}">
            <span class="checkmark"></span>
            </div>
            <div class="vas-obs-value"><sup class="currency">THB</sup>{{vas.value}}</div>
            <div class="horizantal-line-obs"></div>
            <div class="vas-obs-text-inner">Lorem ipsum dolor sit amet,consectetur adip</div>
      </div>

Answer 1

<input type="checkbox" checked="checked" name="vas{{i}}">

checked属性在所有输入之间共享。该字段需要是动态的，就像您的名称属性一样。

您可以在创建时为每个vas对象添加一个字段

checked: boolean

然后，模型绑定到每个'vas'对象中的checked字段

这是一个显示这个想法的stackblitz：https://stackblitz.com/edit/angular-km8sew

基本上就是这个，只需替换你的对象字段等......：

<div class="vas-obs vas-selected" *ngFor="let vas of vasDatas; let i=index;">
  <div class="vas-obs-text checkbox-container">
    <input type="checkbox" [(ngModel)]="vas.checked" name="vas{{i}}"> {{vas.name}}
  </div>
</div>

如何在`ngFor`循环中添加`checkbox`

1 个答案: