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_）传递给我的函数，您该怎么做？

我可以看到与此相关的问题How to get checkbox data in angular material，但真的有一种方法可以在不使用ngModel和reactive forms的情况下实现吗？

Answer 1

复选框上的click事件只是本机click事件，   对复选框本身一无所知。使用变更   事件或直接在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>

Answer 2

您可以使用Kuncevič中提到的方法。要获得确切的值，您想使用类似这样的

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

在打字稿中使用“ event.source”检索值

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

Answer 3

我是这样解决的：

HTML：

<mat-checkbox class="chklist" labelPosition="after" (change)="seleccionRubros($event)">

TS：

public seleccionRubros(event: MatCheckboxChange) {

   if (!event.source.checked) {
      this.subRubrosSelec = [];
   }

};

请注意我如何在 $event 事件中将 seleccionRubros() 传递到 (change) 中，后来确定单击时，通过读取 event.source.checked 选中或取消选中复选框。

作为澄清，我决定指定 event 的类型，但实际上并不需要。

Answer 4

您可以使用元素的checked属性。

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

请注意，它是!c.checked，因为在您单击它时，它尚未被选中。

Stackblitz Demo

Answer 5

使用[checked]和[value]绑定值，并在(change)事件中传递参数。我已经创建了一个示例，请点击此处https://stackblitz.com/edit/angular-anyw41?file=app/checkbox-configurable-example.html

Answer 6

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

实际上也可以使用ngModel :)

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

如何从角形材料复选框中获取值

7 个答案: