如何使用 CdkScrollable 检测角度材料 2 自动完成列表上的滚动事件

Posted 2023-03-05

【中文标题】如何使用 CdkScrollable 检测角度材料 2 自动完成列表上的滚动事件

【英文标题】：How to detect scroll event on angular material 2 autocomplete list using CdkScrollable

【发布时间】：2018-12-22 06:19:11

【问题描述】：

我正在尝试使用cdkScrollable 在mat-autocomplete 上收听ScrollEvent。

我已经实现了如下代码 sn-ps。

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

这几天一直在琢磨这个问题，网上没找到相关资料。

请帮帮我。

【参考方案1】：

如角度材质库中所述，为了避免滚动事件的连续变化检测，默认情况下发出的“滚动”事件将在角度区域之外运行。要使更改检测起作用，请添加 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');
    )
  

【参考方案2】：

我想你可能会在这里找到答案：Angular virtual scroll: append new items when reaching the end of scroll

听起来这正是您正在寻找的行为，但您可能需要对其进行调整，具体取决于您使用的角度版本