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

Posted 2023-03-05

【中文标题】如何从角度材料复选框中获取值

【英文标题】：How to get the value from angular material checkbox

【发布时间】：2019-04-16 07:52:04

【问题描述】：

我有一个复选框列表：

    <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 的情况下实现吗？

【问题讨论】：

这个值_value_ ?

@SergioEscudero 刚刚修改了问题。

【参考方案1】：

复选框上的点击事件只是原生的点击事件， 对复选框本身一无所知。使用更改 事件或直接获取 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】：

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

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

注意它是!c.checked，因为当您点击它时，它还没有被选中。

Stackblitz Demo

【讨论】：

由于 mat-checkbox 支持 ngModel 我们不需要 DOM 引用变量 #c

是的！你说的对。他修改了这个问题。但是即使他不想要ngModel，仍然不需要DOM 引用变量。可以通过(change)事件获取$event对象

【参考方案3】：

您可以使用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);

【讨论】：

ERROR TypeError: "event.source is undefined"

【参考方案4】：

使用[checked] & [value] 绑定值，并在(change) 事件中传递参数。我已经创建了一个例子，在这里查看https://stackblitz.com/edit/angular-anyw41?file=app/checkbox-configurable-example.html

【讨论】：

我也更新了答案。它按你的意愿工作。请查看链接stackblitz.com/edit/angular-anyw41?file=app/…

【参考方案5】：

我是这样解决的：

HTML：

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

TS：

public seleccionRubros(event: MatCheckboxChange) 

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

;

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

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

【参考方案6】：

其实也可以不用 ngModel :)

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

【讨论】：

哈哈哈，抱歉，没有看到其他所有已经发布答案的人......

【参考方案7】：

将 $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（不确定。你可以在控制台中看到）