Angular2 ngFor 总是崩溃 <tr>

Question

这里是网络开发新手。

我用 *ngFor 创建了我的 <tr data-toggle="collapse" data-target="#details">。我的经验是点击一行总是折叠相同的 div 而不是与之匹配的那个。

可能是因为他们都获得相同的 ID (?)

我做错了什么，我怎样才能实现我想要的？

代码：

<template let-transaction ngFor [ngForOf]="accountTransactions">
    <tr data-toggle="collapse" data-target="#details">
        <td>{{transaction.time}}</td>
        <td>{{transaction.description}}</td>
        <td>{{transaction.amount}}</td>
        <td>{{transaction.currency}}</td>
    </tr>
    <div class="container collapse" id="details">

提前致谢！

Answer 1

我试过使用当前迭代对象的索引并将其放置在 data-target 和可折叠 <div> 的 id 中，就像这样：

<template let-transaction ngFor [ngForOf]="accountTransactions" let-i="index">
    <tr data-toggle="collapse" [attr.data-target]="'#'+i">
        <td>{{transaction.time}}</td>
        <td>{{transaction.description}}</td>
        <td>{{transaction.amount}}</td>
        <td>{{transaction.currency}}</td>
    </tr>
    <div class="container collapse" [attr.id]="i">

希望对大家有所帮助

Angular2 ngFor 总是崩溃 <tr>

Angular2 ngFor collapses always the same <tr>

jquery

collapse

angularjs

ngfor

angular

代码：