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

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

Answer 2

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

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

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

2 个答案: