Javascript 使用angular获取复选框的值

我在获取角度中的

checkbox

值时遇到问题。以下是片段：

<div class="list-group-item" *ngFor="let ticket of tickets">
   <input
      type="checkbox"
      [name]="ticket.id"
      [id]="ticket.id"
      [value]="ticket.id"
      formControlName="ticketTypes"
   />
   <label for="{{ ticket.id }}">{{ ticket.name }}</label>
</div>

{{ticket.name}

我得到的高于复选框的值为

true

。如何正确获取复选框值

这里有一个您可以使用

（change）

，它在每次检测到输入元素上的更改时都会触发，然后编写自定义逻辑以从列表中获取选中的项目，例如：

HTML:

---

在这种情况下，如果您正在处理表单，最好/建议您使用

formArray

，或者您可以简单地使用

ngModel

角度的双向数据绑定

<ul>
    <li *ngFor="let item of list">
    <input type="checkbox" [(ngModel)]="item.checked">{{item.title}}
  </li>
</ul>

---

您使用的是ngForm还是被动表单？@GangadharGandi我使用的是被动表单。请同时粘贴component.ts的代码。他们可以检查，但我认为这不会解决OP的问题。不过，在我看来，您不能在复选框中这样使用formControl，您是否可以在没有formcontrolname的情况下为同样的表单提供工作演示，只要使用

（change）=“onCheck（ticket.id）”

将选中的项目保留在一个数组中，这对我来说是有效的，如果流程像

check

->

取消选中
->
check
这将在数组中添加重复的条目，您需要一个自定义逻辑来再次处理它。因此，总的来说，我不建议使用这种方案。最后，如果用户不想在现有对象中添加额外属性，但如果
[（ngModel）]
工作正常，然后更好one@AdritaSharma测试：
单击Test1，然后单击Test2，然后取消选中Test1。它显示空数组
，但预期
Test2
我将使用
[（ngModel）]=”项。选中“
，这是干净且简单的！很酷，永远是你的选择：）@PrashantPimpale但是当你处理这么长的表单时，你通常会避免使用ngModel为相同的表单添加额外的变量，因此在这些情况下formArray是有益的。你的想法？是的，甚至不需要添加额外的feild来维护状态
（选中/未选中）
耶@PrashantPimpale:）如果你喜欢我的处理方式，请竖起大拇指：请检查堆栈Blitz
import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  tickets = [{ id: 1, name: "Test1" }, { id: 2, name: "Test2" }];

  checkedTickets = [];

  onCheck(evt) {
    if (!this.checkedTickets.includes(evt)) {
      this.checkedTickets.push(evt);
    } else {
      var index = this.checkedTickets.indexOf(evt);
      if (index > -1) {
        this.checkedTickets.splice(index, 1);
      }
    }
    console.log(this.checkedTickets);
  }
}

 <form [formGroup]="form" (submit)="submit(form.value)">
  <div *ngFor="let s of addOns.controls; let j=index">
   <input type="checkbox" [formControl]="s"/> {{user1.addOns[j].name}}
  </div>
 </form>

<ul>
    <li *ngFor="let item of list">
    <input type="checkbox" [(ngModel)]="item.checked">{{item.title}}
  </li>
</ul>