时间戳

首页 > 解决方案 > 确定复选框是否被选中

angular - 确定复选框是否被选中

问题描述

想要使用 if 语句确定是否已在最新版本的 Angular 中选择了复选框。

我的代码：

<mat-menu #wj="matMenu">
   <section><mat-checkbox (id)='1' (click)="$event.stopPropagation()">Cool Kids</mat-checkbox></section>
</mat-menu>

<div class="float-right">
 <mat-action-row>                           
  <button mat-button color="primary" (click) = "generateLink()" >Generate Link</button>
</mat-action-row>

在 component.ts 中：

generateLink() {
    <HTMLInputElement>document.getElementById('1')
    if(<HTMLInputElement>document.getElementById('1')){
        console.log('y');
    }      
}

这个想法是，一旦按下提交按钮，该generateLink()方法将评估以查看所有由 ID 选中的复选框。如果有更好的方法可以做到这一点，请分享。本质上，有 15 个复选框，当按下提交按钮时，我需要在最后将它们的所有值收集到一个数组中。

标签： angulartypescript

解决方案

首先，您应该知道 mat-checkbox 为MatCheckbox对象生成一个内部 id。

其次，我同意您应该通过 Forms 管理您的元素状态。

但是，如果您仍想跟踪是否选中了某些复选框，则可以跟踪它。

链接：stackblitz.com

简单地说，我使用服务将每个选定的复选框作为 MatCheckbox 对象发出。

然后，我在单击 Button 时迭代 MatCheckbox 数组，每次迭代都会评估选中的对象并将其 id 打印到控制台，仅用于演示目的。

希望能帮助到你。

推荐阅读