angular - 如何在 ngx-virtual-scroll 中折叠/展开多个 Div？

Question

https://stackblitz.com/edit/angular-ngx-virtual-scroller-byykpn

这是我到目前为止所做的，现在我需要展开/折叠组标题之后的所有 div。

Answer 1

您只需要一个布尔数组来映射折叠的 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.

Answer 2

您可以将这些 div 包装在ng-containerwithngIf和 toggle 扩展中。我只是认为您对每个项目都有一个唯一的 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;
  }

如果你想同时扩展多行，那么你应该记住一个对象中扩展的行，isCollapsed其中键是扩展item.id的，值是布尔值，例如

  isExpanded = {};

  toggleExpand(val) {
    this.isExpanded[val] = !this.isExpanded[val];
  }

并将您的 ng-container 调整为：

<ng-container *ngIf="isExpanded[item.name]">