web-dev-qa-db-ja.com

angularマテリアルチェックボックスから値を取得する方法

チェックボックスのリストがあります：

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

checkbox値（__checkbox_value_here__）を関数に渡す必要があります。どうすればよいですか？

私はこの関連する質問を見ることができます angular material でチェックボックスデータを取得する方法==ですが、ngModelと_reactive forms_？

angularcheckboxangular-material2
7
sreginogemoh

チェックボックスのクリックイベントは、ネイティブのクリックイベントであり、チェックボックス自体については何も知りません。 changeイベントを使用するか、直接MatCheckboxインスタンスのハンドルを取得する（@ViewChildrenなどを使用）ことをお勧めします。

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

Kuncevič で言及されているアプローチを使用できます。このようなものを使用したい正確な値を取得するには

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

TypeScriptでは、「event.source」を使用して値を取得します

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

使用する [checked]＆[value]は値をバインドし、パラメータを(change)イベント。私は例を作成しました、ここをチェックしてください https://stackblitz.com/edit/angular-anyw41?file=app/checkbox-configurable-example.html

1
Santhosh V

要素のcheckedプロパティを使用できます。

<mat-checkbox #c (click)="toggle(!c.checked)">Check me!</mat-checkbox>
  • !c.checked、クリックした時点ではまだチェックされていないため。

Stackblitzデモ

1
Stavm

$ eventを関数に渡します

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

イベントオブジェクトから関数の値を取得できます。

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

event.value（これについては不明。コンソールで確認できます）

0
Vijay Atmin

実際にngModelでも可能です:)

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

0
Magnus Gudmundsson