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个元素。

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

Answer 1

所以我做了这些改变，据我所知，渲染速度要快得多：

SELECT [MailboxOwnerUPN]
      ,[MailboxResolvedOwnerName]
      ,[LastAccessed]
      ,[ClientIPAddress]
      ,[ClientInfoString]
      ,[MailboxGuid]
      ,[Operation]
      ,[OperationResult]
      ,[LogonType]
      ,[ExternalAccess]
      ,[InternalLogonType]
      ,[LogonUserDisplayName]
      ,[OriginatingServer]
  FROM dbo.New
  WHERE [Processed] = 1 and
        NOT EXISTS (Select * From dbo.Existing
                          Where New.LastAccessed = Existing.LastAccessed and 
                                New.ClientIPAddress = Existing.ClientIPAddress and
                                New.ClientInfoString = Existing.ClientInfoString and
                                New.MailboxGuid = Existing.MailboxGuid)
GO

更改是添加<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

防止为未打开的扩展面板渲染内部html

1 个答案: