Angular mat-checkbox的for属性不生效 点击label无法触发复选框

问题原因 #

• mat-checkbox 组件内部已默认封装了文本与复选框的关联逻辑，你在组件内部额外嵌套了带for属性的自定义<label>，会导致单次点击触发两次复选框状态切换，第一次勾选、第二次立即取消，因此出现状态回滚、change事件未触发的现象。
• 你给mat-checkbox绑定的id是组件根DOM元素的id，并非内部真实可交互的<input type="checkbox">元素的id，for属性关联的目标本身就是错误的。

解决方案 #

方案1：无需自定义label位置（推荐） #

直接删除你自定义的<label>标签，把文本内容放在mat-checkbox标签内部即可，组件默认支持点击文本触发复选框切换，无需手动配置id、for属性：

<ul>
    <li formArrayName="EntryTypes" *ngFor="let t of filterOptions; let i = index"
                    fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="40px" [ngClass]="{'checked' : isChecked}">
        <mat-checkbox [formControlName]="i" (change)="onCheckChange($event, i)">
            {{t}}
        </mat-checkbox>
    </li>
</ul>

方案2：需要将label放在mat-checkbox外部 #

如果你的业务场景需要把label和复选框组件分开布局，使用mat-checkbox暴露的inputId属性绑定内部输入框的id，再给外部label的for属性绑定相同值即可：

<ul>
    <li formArrayName="EntryTypes" *ngFor="let t of filterOptions; let i = index"
                    fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="40px" [ngClass]="{'checked' : isChecked}">
        <mat-checkbox [inputId]="'entry-type-'+i" [formControlName]="i" (change)="onCheckChange($event, i)">
        </mat-checkbox>
        <label [for]="'entry-type-'+i">{{t}}</label>
    </li>
</ul>

内容的提问来源于stack exchange，提问作者SomeStudent