如何在角度材料垫选择中使用滚动事件? [英] how to use scroll event in angular material mat select?

问题描述

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

<mat-select placeholder="选择医生" formControlName="selectedDoc" (change)="drSelected()"><div *ngFor="let dr of Doctors;let i = index" [matTooltip]="getDocDetail(i)" matTooltipPosition="right"><mat-option (scroll)="docScroll()" [value]="dr">{{博士姓名}}</mat-option>

</mat-select><mat-h​​int>您所在城市的医生名单</mat-h​​int><mat-error *ngIf="selectedDoc.hasError('required')">请选择一位医生</mat-error></mat-form-field>

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

解决方案

查看 Stackblitz 我创建的.

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

allDoctors = ['doctor', 'doctor', ..., 'doctor'];viewDoctors = this.allDoctors.slice(0, 10);私有只读 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.target.scrollTop > this.RELOAD_TOP_SCROLL_POSITION) {this.viewDoctors = this.allDoctors;}}

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

<mat-select placeholder="选择医生"#doctorSelect>^^^^^^^^^^^^^^<mat-option *ngFor="let dr of viewDoctors;let i = index">{{博士}}</mat-option></mat-select></mat-form-field>

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

i have a large list and i want to load it as the user scroll down the select field but how can i get the scroll event in mat-select there is no event that fire the scroll event.

<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>

(scroll) don't work because mat-select don't have any scroll event any other way i can achieve this i want to show like 10 item first then populate the rest item when user scroll end of the options .

解决方案

Check out the Stackblitz I created.

In your component, get the MatSelect via ViewChild to access its scrollable panel. Then add an event listener to the panel, which reloads the doctors and updated the viewDoctors array when the scrollTop position exceeds a certain threshold.

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

Don't forget to assign your mat-select to a variable in your template so that you can access it via 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>

This is only a very basic setup illustrating the idea. You might want to do show a loading animation, cleanup the event listener,...

这篇关于如何在角度材料垫选择中使用滚动事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！