使用Angular2的HTML标记中的变量

由于Angular2中的*ngFor，我试图为我显示的每个元素提供一个独立的输入，我尝试了这个方法，但不起作用：

<li *ngFor="let child of childArray; let i=index"> <input type="checkbox" id="{{child.name}}" style="display:none;">
    <label for="{{child.name}}">
       <h1>{{child.name}}</h1> 
   </label></li>

{{child.name}

当然，

{{child.name}}

显示正确，但我似乎无法将其用作标记组件中的变量。有人有办法管理它吗

---

提前谢谢

您可以尝试以下方法：

<li *ngFor="let child of childArray; let i=index">
  <input type="checkbox" [attr.id]="child.name" style="display:none;">
  <label [attr.for]="child.name">
    <h1>{{child.name}}</h1> 
  </label>
</li>

{{child.name}

当你说“我不能在标记组件中使用它作为变量”时，你是什么意思？属性不包含值？

可能来自@slidefizz的重复注释（在他的“答案”被删除时保留）：感谢您的回答它与您的语法一起工作，“我不能将它用作标记组件中的变量”，我的意思是

id=“{{child.name}

和

for=“{{child.name}”“

不使用此语法，

for

和

id

是

标记组件（或者可能“tag attribute”是更好的含义）和
{{child.name}
变量。