Angular 7、Bootstrap Collapse 和 aria-controls 的动态值

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>