Angular - 优化 mat-expansion-panel ngFor

Question

我有以下代码用 mat-expansion-panels 填充 mat-accordion：

<mat-accordion>
        <mat-expansion-panel *ngFor="let item of items; trackBy: trackByFunction; let i = index" hideToggle="true">
        <!-- item details here -->
        </mat-expansion-panel>
</mat-accordion>

我不知道我是否使用正确的工具做正确的事：

我想在这个 mat-accordion 中展示大约 435 个项目。当用户单击其中一个时，它将展开并显示项目详细信息。

但是，当分配“items”数组的值时，它会挂起浏览器选项卡大约 6 秒，我希望这不会发生。

我不知道 435 项对于这种情况来说是否太多了，因为我已经在一个页面中处理了 2000 多条记录而没有出现此浏览器选项卡挂起问题（请不要怪我，系统用户要求在一个页面中查看所有这些 2.000 条记录 :( )

有没有办法解决这个挂起问题，或者我应该改用 mat-table 吗？

我尝试使用扩展面板，因为它对我来说似乎很花哨。

谢谢。

Answer 1

如果您有 435 个空扩展面板或里面有内容，它是否已经挂起？如果里面有内容，可以试试lazy rendering。

如果问题只是扩展面板的数量，您可以尝试使用不带手风琴的扩展面板，而是尝试使用virtual scrolling 呈现列表。