Как добавить индекс из * ngFor в attr.id - HTML

Question

как я могу добавить индекс к моему attr.id, чтобы я хотел получить уникальные идентификаторы для каждой строки:

<tr *ngFor="let content of contents;let i=index;">
    <td style="width: 10%;">
      <input class="styled-checkbox" [attr.id]={{i}} + "content_item"  type="checkbox"  style="display:none;" value="" name="content-view">
      <label [attr.for]="content.id"></label>
    </td>
    <td>{{i+1}}</td>
</tr>

Как видите, ребята, я пытаюсь добавить:

[attr.id]={{i}} + "content_item" 

поэтому мой идентификатор будет выглядеть как 1content_item, 2content_item, 3content_item и т. Д.

Но это не работает, он говорит:

отсутствует имя атрибута ..

И когда я пытаюсь это сделать:

[attr.id]="{{i}}content_item"

он говорит:

Ошибка: ошибки синтаксического анализа шаблона:

Answer 1

Когда вы привязываете значение к атрибуту, вы используете либо интерполяцию {{}}, либо привязку свойства. Так как вы используете привязку свойства, вы не должны использовать интерполяцию

[attr.id]="i+ 'content_item'"