Angular 7, Bootstrap Collapse и динамическое значение для элементов управления aria

Question

Я пытаюсь создать собственный компонент и использовать его в * ngFor.Мне нужно уникальное значение для моего коллапса.Потому что теперь, когда я нажимаю на мою вторую основную строку в свертке таблицы, отображается только внутренняя строка из первой основной строки, но должна отображаться внутренняя строка для второй основной строки.

Это мой компонент.

<app-table-row>

и его код

<table class="table table-bordered">
  <tbody>
  <tr>
    <td data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="{{client.cnk}}">
  {{client.cnk}}
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>{{client.modDate}}</td>
    <td>{{client.rank}}</td>
    </tr>
  </tbody>
</table>

<div id="{{client.cnk}}" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
   <app-inner-table>

    </app-inner-table>
</div>

А вот использование:

<div class="col-xl-12 app-panel registry-table">

  <app-table-header></app-table-header>
 <app-table-row *ngFor="let client of clients" [client]="client"></app-table-row>
<hr>
</div>

И в консоли я вижу эту ошибку:

Can't bind to 'aria-controls' since it isn't a known property of 'td'. ("
  <tbody>
  <tr>
    <td data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" [ERROR ->]aria-controls="{{client.cnk}}">
      {{client.cnk}}
    </td>

Answer 1

У меня была такая же проблема, и этот ответ работал для меня: https://github.com/angular/angular/issues/4385

попробуйте что-то вроде этого:

<td data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"[attr.aria-controls]=client.cnk>