Angular2 ngFor 总是折叠相同的 <tr>

Posted 2023-03-24

【中文标题】Angular2 ngFor 总是折叠相同的 <tr>

【英文标题】：Angular2 ngFor collapses always the same <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">

提前致谢！

【参考方案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">

希望对某人有所帮助