如何在 ngx-virtual-scroll 中折疊/展開多個 Div？

Question

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

這是我到目前為止所做的，現在我需要展開/折疊組 header 之后的所有 div。

Answer 1

您只需要一個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.

Answer 2

您可以使用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]">