如何在角度材料垫选择中使用滚动事件？

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.

在组件中,获取MatSelectvia 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>

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