![](/img/trans.png)
[英]relative elements are on top of table header ngx-virtual-scroll
[英]How can I Collapse/Expand Multiple Divs in ngx-virtual-scroll?
https://stackblitz.com/edit/angular-ngx-virtual-scroller-byykpn
这是我到目前为止所做的,现在我需要展开/折叠组 header 之后的所有 div。
您只需要一个boolean数组来映射折叠的 div。
在这里查看您的代码
https://stackblitz.com/edit/angular-ngx-virtual-scroller-nzqnbw?file=src/app/app.component.html
isCollapsed: boolean[] = [];
constructor(private cd: ChangeDetectorRef) {
for (let i = 1; i < 10; i++) {
this.items.push({ name: 'Item ' + i });
this.isCollapsed[i] = true;
}
// Just to see the first item not collapsed, you can omit it if you want them all collapsed by default.
if (this.items.length > 0) { this.isCollapsed[0] = false; }
}
HTML:
<div
*ngFor="let item of scroll.viewPortItems; let indexOfColaps = index"
class="groupQuestion"
>
<div *ngIf="!isCollapsed[indexOfColaps]">
<div class="Question">Question1</div>
<div class="Question">Question2</div>
<div class="Question">Question3</div>
<div class="Question">Question4</div>
<div class="Question">Question5</div>
</div>
\\You can change div *ngIf="... for container *ngIf="... if you want.
您可以使用ngIf
将这些 div 包装在ng-container
中并切换扩展。 我只是认为您对每个项目都有一个唯一的 ID。 所以我们可以只用它来标记哪个项目是展开的。 如果您没有每个项目的唯一键,您可以只使用项目的索引。
您的模板:
<button (click)="toggleExpand(item.id)">expand</button>
<ng-container *ngIf="item.id == isExpanded">
<div class="Question">Question1</div>
<div class="Question">Question2</div>
<div class="Question">Question3</div>
<div class="Question">Question4</div>
<div class="Question">Question5</div>
</ng-container>
切换方法:
toggleExpand(val) {
this.isExpanded= val == this.isExpanded? '' : val;
}
如果您想同时展开多行,那么您应该在 object isCollapsed
中记住展开的行,其中键是展开的item.id
,值是 boolean,例如
isExpanded = {};
toggleExpand(val) {
this.isExpanded[val] = !this.isExpanded[val];
}
并将您的 ng-container 调整为:
<ng-container *ngIf="isExpanded[item.name]">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.