对于标签上的属性，当ID和属性被绑定时，请在单击时与关联的输入交互

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>

当标签上的输入和 for属性上的 id属性通过 []绑定到数据时，单击标签无助。

如果我对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>