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

Question

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

所以我有一段代码 <table> 和 *ngFor 用于 <tr> 并且每一行都拥有一个可折叠的 <div> 连接行的索引。

所有内容都在一个 HTML 文件中，包括 <tr> 和匹配的可折叠 <div>，按预期折叠和工作。

我想组织我的代码并分离到组件，所以我为可折叠 <div> 创建了另一个组件作为 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

我认为问题出在 i 变量上。它应该是 index( 因为你有 index 作为 输入变量) 代替。

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

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

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

Angular2 Collapse another Component's <div>

html

javascript

collapse

twitter-bootstrap

angular

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

代码部分：

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

Angular2 Collapse another Component's <div>

html

javascript

collapse

twitter-bootstrap

angular

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

代码部分：

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