web-dev-qa-db-fra.com

Comment obtenir la valeur de angular

J'ai une liste de cases à cocher:

    <section *ngFor="let item of list">
      <mat-checkbox [checked]="item.value" (click)="toggle(_checkbox_value_here_)">{{item.key}}</mat-checkbox>
    </section>

Je dois transmettre la valeur checkbox (_checkbox_value_here_) à ma fonction, comment feriez-vous cela?

Je peux voir cette question connexe Comment obtenir des données de case à cocher dans angular mais est-il vraiment possible de le faire sans utiliser ngModel et reactive forms?

angularcheckboxangular-material2
7
sreginogemoh

L'événement de clic sur la case à cocher est juste l'événement de clic natif, qui ne sait rien de la case à cocher elle-même. L'utilisation de l'événement change ou tout simplement l'obtention d'un handle sur l'instance MatCheckbox directement (par exemple avec @ViewChildren) serait l'approche recommandée.

(c) https://github.com/angular/material2/issues/13156#issuecomment-427193381

<section *ngFor="let item of list">
  <mat-checkbox [checked]="item.value" (change)="toggle($event)">{{item.key}}</mat-checkbox>
</section>
2
Kuncevič

Vous pouvez utiliser l'approche mentionnée par Kuncevič . Pour obtenir la valeur exacte que vous souhaitez utiliser quelque chose comme ça

<section *ngFor="let item of list">
  <mat-checkbox [checked]="item.value" (click)="toggle($event)">{{item.key}}</mat-checkbox>
</section>

Et dans TypeScript, utilisez "event.source" pour récupérer la valeur

toggle(event){
  console.log(event.source.value);
}
2
TechFriend

Utilisation [checked] & [value] pour lier la valeur et passer le paramètre dans (change) un événement. J'ai créé un exemple, vérifiez ici https://stackblitz.com/edit/angular-anyw41?file=app/checkbox-configurable-example.html

1
Santhosh V

vous pouvez utiliser la propriété checked de l'élément.

<mat-checkbox #c (click)="toggle(!c.checked)">Check me!</mat-checkbox>
  • remarquez que c'est !c.checked, car au moment où vous cliquez dessus, il n'est pas encore vérifié.

Démo Stackblitz

1
Stavm

Passez $ event à la fonction

<section *ngFor="let item of list">
  <mat-checkbox [checked]="item.value" (click)="toggle($event)">{{item.key}}</mat-checkbox>
</section>

Vous pouvez obtenir de la valeur dans la fonction de l'objet d'événement.

toggle(event){
  console.log(event)
}

Je pense que ce sera event.value (pas sûr à ce sujet. Vous pouvez voir dans la console)

0
Vijay Atmin

En fait c'est possible sans ngModel aussi :)

https://stackblitz.com/edit/angular-anyw41-zxrncz?file=app/checkbox-configurable-example.html

0
Magnus Gudmundsson