使用Angular获取复选框的价值

debugcn 发表于 Dev

蝙蝠侠

我在获取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>

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

这是一次突击

阿德里塔·沙玛（Adrita Sharma）

您可以使用(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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。