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属性通过[]绑定到数据时，点击标签不会做任何事情。

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

当id和for属性绑定时，对于标签上的属性不会与点击时的关联输入交互

1 个答案: