Javascript 绑定id和For属性时，标签上的For属性不会与单击时的关联输入交互

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

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

属性优先于实际复选框或单选按钮上产生的

id

属性。将

id

输入更改为

idStr

可以让一切按预期工作

例如：

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

您真的将这么多属性名称包装在方括号中了吗，还是仅限于此？出于某种原因？如果它存在于您的真实代码中，那么这可能就是它不起作用的原因（尽管angular和typescript可能对此做了一些有用的事情？）；如果它只是为我们在这里，那么请显示真正的HTML。。。。这就是真正的html。这些属性绑定到组件中的关联输入值。它被称为：

请将您的问题显示为生成的HTML，正如您在“查看源代码”或DOM中看到的那样；该格式似乎不必要地令人困惑（尽管这可能是我对该特定组件的经验不足）

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