javascript - Obtener el valor de un checkbox usando angular

Tengo un problema para obtener los valores de checkbox en Angular. Aquí está el fragmento:

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

Estoy obteniendo el valor del checkbox anterior como true. ¿Cómo obtener el valor del checkbox correctamente?

Aquí hay un stackblitz

Respuesta #1

Puedes usar (change), que se activa cada vez que se detecta un cambio en el elemento de entrada y luego escribir una lógica personalizada para obtener los elementos marcados de la lista, por ejemplo:

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>

Código 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);
  }
}

Demostración Funcional

Respuesta #2

En tales escenarios es mejor/recomendado usar formArray si estás manejando el formulario o simplemente puedes usar ngModel para el enlace de datos bidireccional de 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>

También simplemente formControlName, es decir, un solo control, generalmente se usa al trabajar con Botones de opción porque en ese caso el usuario siempre puede seleccionar un solo valor, pero aquí, en el caso de casillas de verificación, también se pueden seleccionar varias entradas, lo que está diseñado de esta manera. Por lo tanto, podrías usar un array en ese caso como en mi ejemplo anterior.

Ejemplo de trabajo

O en caso de que quieras usar ngModel, puedes usarlo así -

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

Ejemplo de trabajo