【问题标题】：Angular2 ngFor collapses always the same <tr>Angular2 ngFor 总是折叠相同的 <tr>
【发布时间】：2017-01-08 09:14:31
【问题描述】：

这里是一个菜鸟网络开发人员。

我使用*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">

提前致谢！

【问题讨论】：

标签： jquery angularjs angular collapse ngfor

【解决方案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">

希望对某人有所帮助

【讨论】：