3

好的，所以最近我一直在尝试将我的一些表格功能迁移到使用虚拟滚动，仅仅是因为 DOM 被数百个节点同时包含大量数据集而陷入困境。

话虽如此，我只是打算在我的表上使用 Angular Material CDK 虚拟表滚动指令，因为它们无论如何都是垫表。我找到了一些例子，虽然我似乎无法让事情正常工作。

这些是我用来获取信息的来源：

下面是我在这里使用的表格模板

<cdk-virtual-scroll-viewport tvsItemSize>
  <table mat-table *ngIf="yuleLogs.length > 0" [dataSource]="yuleLogs">

    <!-- logID Column -->
    <ng-container matColumnDef="logID">
      <th mat-header-cell class="logIDHeader" *matHeaderCellDef> Log ID </th>
      <td mat-cell *matCellDef="let yuleLog">{{ yuleLog.logID }}</td>
    </ng-container>

    <!-- logCategory Column -->
    <ng-container matColumnDef="logCategory">
      <th mat-header-cell class="logCategoryHeader" *matHeaderCellDef> Log Category </th>
      <td mat-cell *matCellDef="let yuleLog">{{ yuleLog.category.categoryName }}</td>
    </ng-container>

    <!-- logText Column -->
    <ng-container matColumnDef="logText">
      <th mat-header-cell class="logTextHeader" *matHeaderCellDef> Log Information </th>
      <td mat-cell *matCellDef="let yuleLog">{{ yuleLog.logText }}</td>
    </ng-container>

    <!-- logDate Column -->
    <ng-container matColumnDef="logDate">
      <th mat-header-cell class="logDateHeader" *matHeaderCellDef> Log Date </th>
      <td mat-cell *matCellDef="let yuleLog">{{yuleLog.logDate.toLocaleDateString()}} {{ yuleLog.logDate.toLocaleTimeString() }} (Eastern Standard Time)</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columns"></tr>
    <tr mat-row *matRowDef="let row; columns: columns;"></tr>
  </table>
</cdk-virtual-scroll-viewport>

和实际的打字稿

import { Component, Input, OnInit } from '@angular/core';
import { YuleLog } from 'src/classes/yuleLogTypes';

@Component({
  selector: 'app-log-table',
  templateUrl: './log-table.component.html',
  styleUrls: ['./log-table.component.css']
})
export class LogTableComponent implements OnInit {

  constructor() { }

  @Input() yuleLogs: Array<YuleLog> = [];

  columns: string[] = ["logID", "logCategory", "logText", "logDate"];

  ngOnInit(): void {
  }

}

所以我知道表的数据源需要是一个 TableVirtualScrollDataSource 对象和所有对象，尽管这里的问题是这是一个应该是可变的子表，并且通常基于输入中的数据。许多 Angular Material 示例在类之外制作常量，这在使用 Input 绑定和所有方面都没有帮助，所以我的问题是，在这种情况下，制作 @Input() 的最佳方法是什么数组，但将其数据传递给 TableVirtualScrollDataSource 变量，请记住实际数组可能会因为父级而改变？

4

0 回答 0