Angular mat-checkbox 属性不起作用

Question

我试图将我的 label 绑定到复选框，以便用户可以 select label 来触发复选框，而不仅仅是单击复选框。 我知道在好的 ol' MVC.NET 中我只会使用 LabelFor 之类的东西。

在这里，它似乎不起作用； 我查看了其他 SO 帖子，以及 github https://github.com/angular/angular/issues/5435上的以下帖子。 上面没有做到这一点，虽然看着 HTML 我可以看到它的 DOM 发生了两个变化，一个似乎实际上触发了它，然后它恢复到未点击的阶段。 复选框本身的 (change) 方法不会被触发。

这是我的代码：

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

我已经手动将id属性应用于每个复选框，否则它实际上并不能保证其 ID 与索引同步。 例如：第一个元素的 id 可能为mat-checkbox-3-input ，即使它是第一个元素，因此其索引应为 0。

我在这里错过了一些非常明显的东西吗？ 我知道我可以在 label 上添加一个点击 function 并收工，但是当有一个方便的属性时为什么要重新发明轮子

Answer 1

不太确定这与原来的 html 有何不同，但这个 html 似乎可以做到：

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

只有我看到不同的是使用id而不是[id]