jquery - Angular2 ngFor 折叠始终相同

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 中。以及 id可折叠的<div>像这样:

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

希望对大家有帮助