我试图在页面上获得多于1个折叠组件,但是当您切换其中一个时,所有折叠组件都会被切换。有没有办法让我有多个折叠组件在1页上工作,我可以在哪里单独切换它们?
示例:从https://ng-bootstrap.github.io/#/components/collapse/examples
获得 <div class="row">
<div class="col-6">
<button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
Toggle
</button>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
<div class="card">
<div class="card-body">
You can collapse this card by clicking Toggle
</div>
</div>
</div>
</div>
<div class="col-6">
<button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample2">
Toggle
</button>
<div id="collapseExample2" [ngbCollapse]="isCollapsed">
<div class="card">
<div class="card-body">
You can collapse this card by clicking Toggle
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
由于OP代码看起来符合在循环内生成的条件,因此我想为动态生成的内容提供更强大的解决方案。
该文档仅演示了与模型(isCollapsed)
1:1关系的简单情况。如果要管理数百个可折叠的设备,这将很糟糕。相反,当您遍历对象时生成内容时,请将折叠状态附加到对象:
myObjList = [{propKey: propVal, isCollapsed: true}]
这样,当对象与以下对象交互时,您可以按对象引用状态:
<... *ngFor='let row of myObjList' ...>
<button class="btn btn-link" (click)="row.isCollapsed = !row.isCollapsed"
答案 1 :(得分:0)
试试这个:
` <div class="row">
<div class="col-6">
<button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
Toggle
</button>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
<div class="card">
<div class="card-body">
You can collapse this card by clicking Toggle
</div>
</div>
</div>
</div>
<div class="col-6">
<button type="button" class="btn btn-outline-primary" (click)="isCollapsedone = !isCollapsedone" [attr.aria- expanded]="!isCollapsedone" aria-controls="collapseExample2">
Toggle
</button>
<div id="collapseExample2" [ngbCollapse]="isCollapsedone">
<div class="card">
<div class="card-body">
You can collapse this card by clicking Toggle
</div>
</div>
</div>
</div>
`
在你的打字稿中:
public isCollapsedone = false:
答案 2 :(得分:0)
使用属性ngbCollapse有其局限性。 Bootstrap适应了一种更简单的解决方案,该解决方案可以在任何情况下(例如您的情况)使用行循环,而这种情况在行上没有循环或其他情况下都适用:
使用您的代码:
模板(html):
<div class="col-6">
<button type="button" class="btn btn-outline-primary"
(click)="toggle(collapseExample)"> Toggle
</button>
<div #collapseExample >
<div class="card">
<div class="card-body">
You can collapse this card by clicking Toggle
</div>
</div>
</div>
</div>
...
控制器(ts):
...
public toggle( element: HTMLElement) {
element.classList.toggle('d-none');
}
实用程序:
...
<tbody *ngFor="let item of items">
<tr>
<td class="text-center" (click)="toggle(rowItem)" ></td>
</tr>
<tr #rowItem>
Value
</tr>
</tbody>