javascript - 防止为未打开的扩展面板呈现内部 html

Question

我有以下 HTML:

  <mat-expansion-panel class="selected-history-panel" *ngFor="let e of elements;" [hideToggle]="hideToggle">

   <mat-expansion-panel-header>{{e.uuid}}</mat-expansion-panel-header>

    <div>
      <app-history-item-tab-group></app-history-item-tab-group>
    </div>

     <mat-checkbox #showButtons>Reveal Buttons Below</mat-checkbox>

     <mat-action-row *ngIf="true">
       <button mat-button>DELETE ITEM 1</button>
     </mat-action-row>

     <mat-action-row *ngIf="showButtons.checked">
       <button mat-button (click)="panel3.expanded = false">DELETE ITEM 2</button>
     </mat-action-row>

  </mat-expansion-panel>

数组中有大约 50 个元素。

此 View 需要一段时间才能加载 - 我假设是因为它正在呈现每个可扩展面板的内部内容。有没有办法使用 *ngIf 有条件地呈现内部内容？

Answer 1

所以我进行了这些更改，据我所知，渲染速度要快得多:

  <mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width">

    <div style="overflow-y: scroll; max-height: 80vh;">

      <mat-expansion-panel #daPanel class="selected-history-panel" *ngFor="let e of elements;" [hideToggle]="hideToggle">

          <mat-expansion-panel-header>{{e.uuid}}</mat-expansion-panel-header>

          <div *ngIf="daPanel.expanded === true">
            <app-history-item-tab-group></app-history-item-tab-group>
          </div>

          <mat-checkbox #showButtons>Reveal Buttons Below</mat-checkbox>

          <mat-action-row *ngIf="true">
            <button mat-button>DELETE ITEM 1</button>
          </mat-action-row>

          <mat-action-row *ngIf="showButtons.checked">
            <button mat-button (click)="panel3.expanded = false">DELETE ITEM 2</button>
          </mat-action-row>

      </mat-expansion-panel>

    </div>


  </mat-accordion>

更改是添加 #daPanel 和 *ngIf