Ошибка виртуальной угловой прокрутки: viewdestroyederror: попытка использовать разрушенное представление: обнаружение изменений

Question

Я использую виртуальную прокрутку из cdk внутри sidenav, открывающего триггер на элементе mat-radio, это примерно код:

ts -

...
@Component({
  selector: 'app-generic-options-list',
  templateUrl: './generic-options-list.component.html',
  styleUrls: ['./generic-options-list.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GenericOptionsListComponent implements OnInit, OnChanges {
  @Input() options: MultiSelectOption[];

  _options: MultiSelectOption[];
...
 ngOnInit(): void {
    this.refreshOptions();
  }

private refreshOptions() {
    this._options = this.options;
...
}

template -

<cdk-virtual-scroll-viewport itemSize="30" class="scroll-viewport" *ngIf="type === 'single'">
<mat-radio-group >
    <mat-radio-button 
    *ngFor="let option of selected"
    [value]="option"
    [checked]="true"
    (click)="onRadioOptionClick(option)">
  {{option.val}}
</mat-radio-button>
  <mat-radio-button 
  *cdkVirtualFor="let option of _options"
      [value]="option"
      [checked]="false"
      (click)="onRadioOptionClick(option)"
      class="scroll-item"
      >
    {{option.val}}
  </mat-radio-button>
</mat-radio-group>
</cdk-virtual-scroll-viewport>

и, конечно, правильный css.

и каждый раз, когда вышеуказанный компонент исчезает (очевидно, не уничтожается, так как не активирует метод onDestroy, когда это происходит) из родительского компонента дляизвестная причина (это должно), тогда я получаю эту ошибку, и sidenav застревает и не закрывается.(и всякие другие странные вещи), я где-то видел, что использование onPush решит эту проблему, но это не так.Как правильно это исправить?

Answer 1

решена.проблема была уже исправлена ​​угловой командой, и мой cdk не обновлялся, обновление cdk исправило это.

Answer 2

В вашем .html файле

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

В вашем .ts файле

import {ChangeDetectionStrategy, Component} from '@angular/core';

/** @title Basic virtual scroll */
@Component({
  selector: 'cdk-virtual-scroll-overview-example',
  styleUrls: ['cdk-virtual-scroll-overview-example.css'],
  templateUrl: 'cdk-virtual-scroll-overview-example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkVirtualScrollOverviewExample {
  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
}

Добавьте несколько привычных css, если вы хотите, чтобы в вашем файле .css

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

Просто попробуйте выполнить следующие шаги в своей логике