Question

每个列表项旁边都有一个mat-list和一个mat-checkbox。该列表大约有700-800个元素。每当我单击checkbox时，选中标记和单击之间都会有很大的延迟。任何想法可能会导致它吗？我读到，即使由于更改检测而只更改了一个元素，Angular也会遍历每个元素，但是即使是这种情况，我也不知道如何避免此问题。

<mat-list>
    <mat-list-item *ngFor="let listItem of productList">    
        <span (click)="selectProduct(listItem)">
            <div matLine>{{listItem.name}}</div>
            <div matLine>{{listItem.desc}}</div>
        </span>
        <mat-checkbox class="example-margin check-box" name="listItem.name" [(ngModel)]="listItem.checked"></mat-checkbox>
        <mat-divider></mat-divider>
        </mat-list-item>
</mat-list>

更新

在每次点击事件被调用时都使用ChangeDetectorRef和.detectChanges()对其进行修复。

Answer 1

我通过700个mat-checkbox为您生成了一些代码。使用Chrome 73.0.3683.86只需不到半秒的时间。是的，它可能会更快，但是棱角分明的材料与性能无关，而与UI有关。

示例为here。

角垫复选框性能问题

1 个答案: