Javascript 角度2折叠另一个组件'；s<；部门>； 太长，读不下去了如何在*ngFor中折叠另一个组件的？

因此，我有一段

的代码，其中

的

*ngFor

用于

的

，这些行中的每一行都有一个可折叠的

通过行的索引连接

它是一个HTML文件，包括

s和匹配的可折叠

s，按预期折叠和工作

我想组织我的代码并将其分离为组件，因此我为可折叠的

创建了另一个组件作为

TransactionRowDetailsComponent

，其中包含两个

@Input

s-要显示的详细信息以及要连接行和该可折叠

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

调试这些

TransactionRowDetailsComponent

组件的创建时，我注意到它们正确地获取了详细信息和索引

你知道如何使用独立的组件吗

提前谢谢

代码部分： 上一次在一个HTML中折叠：

TransactionRowDetails.html

---

我认为问题在于I变量。它应该是索引（正如您将索引作为输入变量）

---

//哪里有一个代码，它应该用细节折叠div元素？你能给我看一下吗？@KamilMyśliwiec到底缺少哪部分代码？您是在要求可折叠的
中的内容吗？这些只是一些显示数据的
，所以可能有点不同。你用什么来折叠div？引导库？它不能正常工作。Angular 2 html模板需要一些时间来加载，因此当引导程序查找任何具有“collapse”类的元素时，它们可能仍然不存在。@KamilMyśliwiec注意到可单击的
和可折叠的
都在同一模板中。正如我之前提到的，当html代码没有被分成两个组件时，它工作得非常好。实际上，我是在谈论它：）在你把html分成两个文件之前，也许bootstrap可以找到你的元素，因为它是纯html。现在它是组件模板，必须另外加载。我认为最好的解决方案是使用另一个@Input变量，例如-isCollapsed，在模板中-[class.collapse]=“isCollapsed”。然后，您只需输入正确的值并在TransactionRowDetailsComponent中侦听ngOnChanges事件。我认为这也是更“角度双向”的解决方案。
<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>

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

    constructor() {}
}

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

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