将 id 绑定到 Angular mat-checkbox

Question

我想将 id 绑定到 Angular 材质复选框。 我有一个对象项目。 当我检查 html 时，我有 item.id + '-input' 但是当我绑定名称时就可以了：item.id

这是我的代码：

<mat-checkbox [id]="item.id"[name]="item.id">

Answer 1

我还没有使用过 Material，但在原生 Angular 中，你可以通过组件通过 [id]="{{item.id}}" 分配 ID。 如果您使用项目的对象数组 []，您还可以尝试迭代数组以创建多个条目，如下所示。

<div class="subbox text-center"
     *ngFor="let i of item">
  <mat-checkbox [id]="{{i.id}}" [name]="{{i.name}}">
</div>

Answer 2

我假设您查看了底层的

input

元素。 Angular Material 复选框在内部将

-input

后缀添加到您的 ID，因为它必须确保 ID 是唯一的。如果将相同的 ID 应用于

input

和

mat-checkbox

元素，则该复选框不起作用，因为 ID 必须是唯一的才能将标签链接到它。