我有一个 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>
我无法让它仅展开单击列的详细信息
最佳答案
我是这样解决的,我想这比实际更改数据本身更方便。
在组件的 HTML 部分中,获取 ngFor 循环的索引,并在事件绑定(bind)和 ngbCollapse 指令中使用此索引变量。 要实现此功能,您的 component.ts 文件中需要一个 bool 属性数组。
组件 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[] = [];
}
关于angular - 带数据循环的折叠区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50703931/