javascript - 如何使用 CdkScrollable 检测 Angular Material 2 自动完成列表上的滚动事件

Question

我正在尝试使用 cdkScrollable听ScrollEvent在 mat-autocomplete .

我已经实现了如下代码片段。

<mat-form-field>
  <input matInput placeholder="Notebook Page" formControlName="notebookPage" [matAutocomplete]="NBPageAutocomplete" >
</mat-form-field>
<mat-autocomplete  #NBPageAutocomplete="matAutocomplete" cdkScrollable >
  <mat-option  *ngFor="let option of suggestedNBPageNames" [value]="option">
                {{ option }}
  </mat-option>
</mat-autocomplete>

constructor(public scroll: ScrollDispatcher) {}
ngAfterViewInit() {
    this.scroll.scrolled().subscribe((data: CdkScrollable) => {
       console.log(data);
      //make an HTTP call when it reaches to the end, to add some more data
    });
  }

订阅 this.scroll.scrolled() 后事件未触发.

过去几天我一直在研究这个问题，没有在网上找到任何相关信息。

请帮我。

Answer 1

如 Angular Material 库中所述，为了避免滚动事件的连续变化检测，默认情况下，发出的“滚动”事件将在 Angular 区域之外运行。要使更改检测起作用，请添加 ngZone.run，如下所示。请根据需要修改 ngZone.run 中的回调。

constructor(public scroll: ScrollDispatcher, private ngZone: NgZone) {}
ngAfterViewInit() {
    this.scroll.scrolled().subscribe((data: CdkScrollable) => {
       console.log(data);
      //make an HTTP call when it reaches to the end, to add some more data
    });
    ngZone.run(() => {
       console.log('to run change detection');
    })
  }