使用角度获取复选框的值

Question

我在获取角度值 checkbox 时遇到问题。这是sn-p：

<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>

我超过了复选框的值true。如何正确获取复选框值？

这是stackblitz

Answer 1

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

HTML：

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

<pre>{{tickets | json}}</pre>

TS 代码：

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);
  }
}

Working Demo

Answer 2

在这种情况下，如果您正在处理表单，最好/建议使用formArray，或者您可以简单地使用ngModel Angular 的两种数据绑定方式。

 <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>

也只是formControlName，即在处理Radio Buttons 时通常使用单个控件，因为在这种情况下，用户可以始终选择单个值，但在checkboxes 的情况下，您也可以选择多个条目，其设计如下这个，所以你可以在这种情况下使用array，就像我上面的例子一样。

Working Example

或者如果你想使用ngModel，你可以像这样使用它-

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

Working Example