当id和For属性绑定时，标签上的属性不与单击上的相关输入交互。

Question

我有一个相当简单的组件，应该输出一个复选框和标签。组件上有四个输入：id、name、label和value。

下面是标记：

<div class="checkbox col-xs-12" *ngIf="id && name && label && value">
    <input type="checkbox" [id]="id" [name]="name" [value]="value">
    <label [for]="id" id="{{id}}-label" aria-label="not here">{{label}}</label>
</div>

当输入上的id属性和标签上的for属性通过[]绑定到数据时，单击label就什么都不会做。

如果我硬编码id和for属性，它们就能正常工作。

使用[attr.id]和[attr.for]产生相同的非工作结果。

这里发生什么事情？

得到的html正是您所期望的：

<div _ngcontent-wam-3="" class="checkbox col-xs-12">
    <input _ngcontent-wam-3="" type="checkbox" ng-reflect-id="bob" id="bob" ng-reflect-name="bobby" name="bobby" ng-reflect-value="true" value="true">
    <label _ngcontent-wam-3="" aria-label="not here" ng-reflect-html-for="bob" for="bob" ng-reflect-id="bob-label" id="bob-label">Checkbox 1</label>
</div>

Answer 1

这个错误是因为自定义元素上的id属性在实际复选框或单选按钮上的结果id属性之前。将id输入更改为idStr使一切按预期工作。

示例：

<my-checkbox name="bob" value="true" idStr="bob1" label="For Bob"></my-checkbox>