使用 angular 获取复选框的值

Question

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

我超过了复选框的值 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

在这种情况下 better/recommended 如果您正在处理表单，则使用 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 时通常使用单一控件，因为在这种情况下用户可以 select 总是单一值，但这里是 checkboxes你也可以 select 多个条目，它是这样设计的，所以你可以像我上面的例子那样在这种情况下使用 array。

Working Example

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

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

Working Example

使用 angular 获取复选框的值

Getting value of checkbox using angular

javascript

typescript

angular

angular7