我有一个SPA(单页面应用程序),其中有一个表格可以扩展细节。
这是代码:
<div class="row mt-4" *ngFor="let row of rows">
<div class="col-12">
<button class="btn btn-link" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
<i class="fa" aria-hidden="true"></i>
Details
</button>
<div [ngbCollapse]="isCollapsed">
{{ row.detail}}
</div>
</div>
</div>
我无法扩展所点击列的详细信息
答案 0 :(得分:4)
您有一个变量isCollapsed
,它控制每个div的展开/折叠(因此要么全部将展开,要么全部将被折叠)。你没有发布Typescript,但我假设它看起来像这样:
export class MyComponent {
public isCollapsed: boolean = true;
public rows: object[] = [
{ detail: 'x' },
{ detail: 'y' }
];
}
您需要单独的isCollapsed
变量来跟踪各个div。
如果你可以控制rows
中的对象,你可以在那里添加:
public rows: object[] = [
{
detail: 'x',
isCollapsed: true
},
{
detail: 'y',
isCollapsed: true
}
];
然后按如下方式更改HTML:
<div class="row mt-4" *ngFor="let row of rows">
<div class="col-12">
<button class="btn btn-link" (click)="row.isCollapsed = !row.isCollapsed"
[attr.aria-expanded]="!row.isCollapsed" aria-controls="collapseExample">
<i class="fa" aria-hidden="true"></i>
Details
</button>
<div [ngbCollapse]="row.isCollapsed">
{{ row.detail}}
</div>
</div>
</div>
这将允许您控制扩展/折叠各个div。请参阅this Plunker了解演示
答案 1 :(得分:1)
我以这种方式解决了它,我想这比实际更改数据本身要方便一些。
在组件的HTML部分中,获取ngFor循环的索引,并在事件绑定和ngbCollapse伪指令中使用此index-variable。 为了使这项工作有效,您需要在component.ts文件中使用一个布尔值数组。
组件HTML
<div *ngFor="let row of rows; let i = index">
<button type="button" (click)="isCollapsed[i] = !isCollapsed[i]">
Button Text
</button>
<div [ngbCollapse]="isCollapsed[i]">
.. some content ..
</div>
</div>
组件TypeScript
@Component({
selector: 'xxx',
templateUrl: './xxx.component.html',
styleUrls: [ './xxx.component.css']
})
export class xxx{
public isCollapsed: boolean[] = [];
}
答案 2 :(得分:0)
对于那些在循环中使用 ngx-bootstrap 手风琴的人:
<div
[attr.id]="setting.id"
[class.collapse]="setting.isCollapsed"
(collapsed)="collapsed($event)"
(expanded)="expanded($event)">
<p>
{{setting.isCollapsed}}
</p>
</div>