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

Question

我正在尝试创建自己的组件并在 *ngFor 中使用它。我的 Collapse 需要独特的值(value)。因为现在当我单击表格中的第二个主行时，折叠仅显示第一个主行的内行，但应该显示第二个主行的内行。

这是我的组件。

<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>