处理可以折叠的多个组件

Question

我有这样的问题：

<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] 输入是一个布尔值，指示我的组件应该是 "folded" 还是 "expanded"。有没有一种简单的方法可以在 ngFor 中管理这样的多个组件？

如果我有一个内部状态并自己管理 fold/unfold 是更好的做法吗？

Answer 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>

如果您需要切换 open/closed 一切，您可以将按钮链接到这样的功能：

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

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

处理可以折叠的多个组件

handling multiple components that can fold

ngfor

angular