我试图在Angular2中列出可扩展数据 . 我正在使用* ngFor循环迭代数据并以成对的标头和可扩展的div显示它以显示该行的更多数据 . Headers 包含两个列值和一个用于查看详细信息的按钮 . 可扩展的div最终本身就是一个标签组件，但是现在我只是尝试在按钮点击时为每一行扩展div .
目前，单击列表中的第一个“查看详细信息”按钮将打开其相应的可扩展div，但其他行上的按钮不会打开其可扩展部分 . 我正在使用Bootstrap折叠功能 .
<div id="accordion">
<div *ngFor="let row of data$ | async; let i=index">
<div class="row">
<div class="col-md-4">
<p>{{ row.dateTime }} </p>
</div>
<div class="col-md-4">
<p>{{ row.source }} </p>
</div>
<div class="col-md-4 text-right">
<button class="btn btn-default"
data-toggle="collapse"
[attr.data-target]="'#' + i"
data-parent="#accordion"
(click)="whatsGoingOn(i)">See details</button>
</div>
</div>
<div class="collapse" [attr.id]="i">
{{row.exceptions}}
</div>
</div>
</div>
我想知道我是如何使用[attr.data-target]和/或[attr.id]的？