【发布时间】：2017-01-19 19:19:33
【问题描述】：
TLDR;如何在*ngFor 中折叠另一个组件的<div>？
所以我有一段代码 <table> 和 *ngFor 用于 <tr>s 并且每一行都有一个可折叠的 <div> 由行的索引连接。
这一切都在一个 HTML 文件中，<tr>s 和匹配的可折叠 <div>s 都可以折叠并按预期工作。
我想组织我的代码并与组件分开，所以我为可折叠的 <div> 创建了另一个组件，作为 TransactionRowDetailsComponent 和两个 @Inputs - 要显示的详细信息和在行之间连接的索引还有这个可折叠的<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>
【问题讨论】：
-
你有一个代码应该折叠你的 div 元素的细节？可以展示一下吗？
-
@KamilMyśliwiec 究竟缺少哪一部分代码？您是在询问可折叠
<div>中的内容吗？这些只是一些<span>显示数据 -
好的，所以可能有点不同。你用什么来折叠div？引导库？它无法正常工作。 Angular 2 html 模板需要一些时间来加载，所以当 Bootstrap 寻找任何具有“折叠”类的元素时，它们可能仍然不存在。
-
@KamilMyśliwiec 请注意可点击的
<tr>和可折叠的<div>如何在同一个模板中。正如我之前提到的，当 html 代码没有分成两个组件时，它工作得非常好 -
是的，我实际上是在谈论它 :) 在你将 html 分成两个文件之前，也许 bootstrap 可以找到你的元素，因为它是纯 html。现在它是组件模板，必须额外加载。我认为最好的解决方案是使用另一个 @Input 变量，例如 - isCollapsed 和在您的模板中 - [class.collapse]="isCollapsed"。然后你只需要输入正确的值并在 TransactionRowDetailsComponent 中监听 ngOnChanges 事件。我认为这也是更“角度 2 方式”的解决方案。
标签： javascript html twitter-bootstrap angular collapse