Как получить значение из углового материала флажок

Question

У меня есть список флажков:

    <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_) моей функции, как бы вы это сделали?

Я вижу этот связанный вопрос Как получить данные флажков в угловом материале , но на самом деле есть ли способ достичь этого без использования ngModel и reactive forms?

Answer 1

На самом деле это возможно и без ngModel :)

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

Answer 2

Событие click на флажке - это просто собственное событие click, которое ничего не знает о самом флажке. Используя изменения событие или просто получить дескриптор экземпляра MatCheckbox напрямую (например, с @ViewChildren) будет рекомендуемый подход.

(с) 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>

Answer 3

Передача $ 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 (не уверен в этом. Вы можете видеть в консоли)

Answer 4

вы можете использовать свойство checked элемента.

<mat-checkbox #c (click)="toggle(!c.checked)">Check me!</mat-checkbox>

• обратите внимание, что это !c.checked, потому что к тому времени, когда вы щелкаете по нему, оно еще не проверено.

Демонстрация Stackblitz

Answer 5

Используйте [checked] & [value], чтобы связать значение и передать параметр в событие (change). Я создал пример, проверьте здесь https://stackblitz.com/edit/angular-anyw41?file=app/checkbox-configurable-example.html