Угловой мат-флажок производительности проблема

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 флажками. Нажатие Chrome 73.0.3683.86 занимает менее полсекунды. Да, это может быть быстрее, но угловой материал никогда не был связан с производительностью, речь шла о пользовательском интерфейсе.

Пример: здесь .