javascript - 如何在 Angular Material 垫选择中使用滚动事件？

Question

我有一个很大的列表，我想在用户向下滚动选择字段时加载它，但是如何在 mat-select 中获取滚动事件，没有触发滚动事件的事件。

<mat-form-field>
  <mat-select placeholder="Choose a Doctor" formControlName="selectedDoc" (change)="drSelected()">
    <div *ngFor="let dr of doctors;let i = index" [matTooltip]="getDocDetail(i)" matTooltipPosition="right">
      <mat-option (scroll)="docScroll()" [value]="dr">
        {{dr.name}}
      </mat-option>
    </div>
  </mat-select>
  <mat-hint>List Of Doctor In Your city</mat-hint>
  <mat-error *ngIf="selectedDoc.hasError('required')">Please Select A Dr</mat-error>
</mat-form-field>

(滚动)不起作用，因为 mat-select 没有任何滚动事件，我可以通过任何其他方式实现这一点，我想先显示 10 个项目，然后在用户滚动选项结束时填充其余项目。

Answer 1

查看 Stackblitz我建立。

在您的组件中，获取 MatSelect通过ViewChild访问其可滚动面板。然后在面板中添加一个事件监听器，它会重新加载医生并更新 viewDoctors数组时scrollTop位置超过某个阈值。

allDoctors = ['doctor', 'doctor', ..., 'doctor'];
viewDoctors = this.allDoctors.slice(0, 10);

private readonly RELOAD_TOP_SCROLL_POSITION = 100;
@ViewChild('doctorSelect') selectElem: MatSelect;

ngOnInit() {
  this.selectElem.onOpen.subscribe(() => this.registerPanelScrollEvent());
}

registerPanelScrollEvent() {
  const panel = this.selectElem.panel.nativeElement;
  panel.addEventListener('scroll', event => this.loadAllOnScroll(event));
}

loadAllOnScroll(event) {
  if (event.target.scrollTop > this.RELOAD_TOP_SCROLL_POSITION) {
    this.viewDoctors = this.allDoctors;
  }
}

不要忘记分配您的 mat-select到模板中的变量，以便您可以通过 ViewChild 访问它:

<mat-form-field>
  <mat-select placeholder="Choose a Doctor" #doctorSelect>
                                            ^^^^^^^^^^^^^ 
    <mat-option *ngFor="let dr of viewDoctors;let i = index">
      {{dr}}
    </mat-option>
  </mat-select>
</mat-form-field>

这只是说明这个想法的一个非常基本的设置。您可能想要显示加载动画，清理事件监听器，...