Question

我正在mat-radio元素上的触发器打开sidenav中的cdk中使用虚拟滚动，这与代码有关：

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;
...
}

模板-

<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

在您的.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;
}

只要按照您的逻辑尝试执行以下步骤

Answer 2

解决了。这个问题已经由Angular团队解决，而我的cdk不是最新的，因此更新了cdk。

角度虚拟滚动错误：viewdestroyederror：尝试使用已破坏的视图：detectchanges

2 个答案: