Angular2折叠另一个组件的<div>

Question

TLDR;如何折叠<div>中的另一个组件的*ngFor？

所以我有<table>代码*ngFor的{​​{1}}代码，每个代码行拥有一个可折叠的<tr>连接的索引这一行。

这是一个HTML文件，<div>和匹配的可折叠<tr>，崩溃并按预期工作。

我想组织我的代码并与组件分开，因此我为可折叠的<div>创建了另一个组件作为<div>，其中包含两个TransactionRowDetailsComponent s - 要显示的详细信息和用于连接行和此可折叠@Input

之间的索引

嗯，它不起作用，我不知道为什么，它不会在点击该行时折叠div。

调试这些<div>的创建我可以注意到他们正确获取了详细信息和索引。

知道如何使用单独的组件吗？

提前致谢！

代码部分：

以前在一个HTML中折叠：

TransactionRowDetailsComponent

当前未折叠分离的组件：

<table class="table table-hover">
    <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">
            <!-- some collapsible content -->
        </div>
    </template>
</table>

分隔的<table *ngIf="accountTransactions" class="table table-hover"> <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> <transaction-row-details [transaction]="transaction" [index]="i"></transaction-row-details> </template> </table>

TransactionRowDetailsComponent

@Component({ selector: 'transaction-row-details', templateUrl: './TransactionRowDetails.html', }) export class TransactionRowDetailsComponent { @Input() transaction: Transaction = new Transaction(); @Input() index: number; constructor() {} }

TransactionRowDetails.html

Answer 1

我认为问题在于 i 变量。它应该是索引（，因为你有索引作为输入变量 ）。

<div class="container collapse" [attr.id]="index">  //<----changed i to index
    Collapse me !
</div>

工作演示：https://plnkr.co/edit/eCRqpEzvMicKpiXdD1gp?p=preview