时间戳

首页 > 解决方案 > 如何在`ngFor`循环中添加`checkbox`

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

问题描述

在我的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>

标签： angulartwitter-bootstrapangular5

解决方案

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

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

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

checked: boolean

然后，模型绑定到每个“vas”对象中的选中字段

这是一个展示这个想法的 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>

推荐阅读