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

Question

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

所以我有一段<table>的代码，其中*ngFor的<tr>分别是，这些行中的每一行都有一个可折叠的<div>，该行通过该行的索引连接。

它全部放在一个HTML文件中，同时包含<tr>和匹配的可折叠<div>，它们可以按预期进行折叠和工作。

我想组织我的代码并将其分离为组件，因此我为可折叠的<div>创建了另一个Component作为具有两个TransactionRowDetailsComponent的@Input-要显示的详细信息以及在行与此可折叠之间连接的索引<div>

好吧，它不起作用，我也不知道为什么，它不会在单击该行时折叠div。

调试这些TransactionRowDetailsComponent的创建时，我会注意到它们正确地获取了详细信息和索引。

知道如何使它与单独的组件一起工作吗？

提前致谢！

代码部分：

以前在一个HTML中折叠：

<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

<div class="container collapse" [attr.id]="i">
    <!-- some collapsible content -->
</div>

Answer 1

我认为问题出在我变量上。它应该是索引（因为您将索引作为输入变量）。

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

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