处理可以折叠的多个组件答案

【问题标题】：handling multiple components that can fold处理可以折叠的多个组件
【发布时间】：2017-06-15 12:42:46
【问题描述】：

我有这样的问题：

<ng-container *ngFor="let item of list">
    <item [content]="item.content" [title]="item.title" [open]="true" (toggleclicked)="/*triggered when a user wants to fold/unfold*/"></item>
</ng-container>

[open] 输入是一个布尔值，指示我的组件是应该“折叠”还是“展开”。有没有一种简单的方法可以在 ngFor 中管理这样的多个组件？

如果我有一个内部状态并自己管理折叠/展开，这是一个更好的做法吗？

【问题讨论】：

我想我能理解你想要什么。为什么不使用Bootstrap collapsible items？
我对引导程序不太了解，我还需要能够拥有像 toggleAll() 这样的控件
非常简单，toggleAll() 函数可以由您使用 Jquery 在 3 行中完成

标签： angular ngfor

【解决方案1】：

不清楚你是否有一个组件item 来处理所有事情，使用你提供的代码，我想说你应该使用项目本身来处理它是否打开。

<ng-container *ngFor="let item of list">
    <item [content]="item.content" [title]="item.title" [open]="item.open" (click)="item.open = !item.open"></item>
</ng-container>

如果您需要切换打开/关闭所有内容，您可以将按钮链接到这样的功能：

function toggleAll() {
     this.collapseAll = !this.collapseAll
     this.list.forEach(x => x.open = collapseAll)
}

如果您有更多相关代码可能会影响答案，请编辑您的问题，我会尝试调整答案。

【讨论】：