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]输入是一个布尔值，表示我的组件应该“折叠”还是“展开”。有没有一种简单的方法可以在ngFor？

中管理这样的多个组件

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

Answer 1

如果您有一个组件item来处理所有内容，并且您提供的代码已经不清楚了，我说您应该使用该项目本身来处理它是否适用于“{1}}。开放与否。

<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)
}

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

处理可折叠的多个组件

1 个答案: