如何使用 CdkScrollable 检测角度材料 2 自动完成列表上的滚动事件 [英] How to detect scroll event on angular material 2 autocomplete list using CdkScrollable

问题描述

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

I'm trying to use cdkScrollable to listenScrollEvent on mat-autocomplete.

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

I have implemented like below code snippets.

<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()后事件未触发.

这几天一直在关注这个问题，网上没有找到相关信息.

I have been struct on this issue from past few days, didn't find any related info online.

请帮帮我.

推荐答案

在angular材质库中提到，为了避免scroll事件的连续变化检测，scrolled"默认情况下，发出的事件将在 angular zone 之外运行.为了使变更检测工作，添加 ngZone.run 如下.请根据需要修改 ngZone.run 中的回调.

As mentioned in the angular material library, in order to avoid continuous change detection for scroll event, the "scrolled" events emitted will be run outside angular zone by default. For change detection to work, add ngZone.run as below. Please modify the callback in ngZone.run as required.

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');
    })
  }

这篇关于如何使用 CdkScrollable 检测角度材料 2 自动完成列表上的滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！