如何连接模板中的字符串？

Question

我尝试在模板中创建一个唯一的 id：

<input type="checkbox" id="cb"+{{data.id}} />
<label for="cb"+{{data.id}}>
   <img class="card-image" [src]="imgUrl"/>
</label>

这data是一个具有字符串 id 属性的组件对象：

@Input() data: Constructor;

但我收到这个错误：

ERROR DOMException：无法在“Element”上执行“setAttribute”：“+{{data.id}}”不是有效的属性名称。**

我的问题是如何将模板中的字符串与组件中定义的属性对象连接起来？

Answer 1

除了其他问题中的解决方案之外，您还可以执行以下操作

1. 插值必须在引号内。
2. 加号不是必需的。

<input type="checkbox" id="cb{{data.id}}" />
<label for="cb{{data.id}}">
  <img class="card-image" [src]="imgUrl"/>
</label>

工作示例：Stackblitz