如何在单个页面中折叠多个ng引导程序组件

Question

我想在我的页面中多次使用这个折叠组件，但在点击其中任何一个后，它们都会折叠，它只希望点击的一个被折叠

Answer 1

在这个SO中，我试图解释ngb如何崩溃

如果你有"；几个"；ngb崩溃你需要"几个"；变量。如果您使用使用模板参考变量的方法

<!--see that the template reference variable are 
"collapse1", "collapse2" and "collapse3" -->
<button type="button" (click)="collapse1.toggle()">Toggle</button>
<div #collapse1="ngbCollapse" [ngbCollapse]>..</div>
<button type="button" (click)="collapse2.toggle()">Toggle</button>
<div #collapse2="ngbCollapse" [ngbCollapse]>..</div>
<button type="button" (click)="collapse3.toggle()">Toggle</button>
<div #collapse3="ngbCollapse" [ngbCollapse]>..</div>

如果你有一个*ngFor，你不必考虑，Angular给出一个不同的"；"范围"；到*ngFor 下的元素

<!--under a *ngFor Angular get the property "scope"-->
<ng-container *ngFor="let i of [0,1,2]">
<button type="button" (click)="collapse.toggle()">Toggle</button>
<div #collapse="ngbCollapse" [ngbCollapse]>..</div>
</ng-container>

如果你采取使用变量的方法，使用数组(或不同的变量(

collapsed:boolean[]=[] //declare an array in .ts
<button type="button" (click)="collapse[0]=!collapse[0]">Toggle</button>
<div #collapse1="ngbCollapse" [ngbCollapse]="collapse[0]">..</div>
<button type="button" (click)="collapse[1]=!collapse[1]">Toggle</button>
<div [ngbCollapse]="collapse[1]">..</div>
<button type="button" (click)="collapse[2]=!collapse[2]">Toggle</button>
<div [ngbCollapse]="collapse[2]">..</div>

或使用ngFor

<ng-container *ngFor="let item of [1,2,3];i=index">
<button type="button" (click)="collapse[i]=!collapse[i]">Toggle</button>
<div [ngbCollapse]="collapse[i]">..</div>
</ng-container>

注意对于使用变量的情况，我更新删除不必要的模板参考变量

Answer 2

我想您需要使用一个单独的"塌陷"；变量，并且"；is折叠"在ts文件中。这将解决你的问题。