javascript - 在 Mat-Select : Angular 6 中滚动到 Mat-0options 末尾时触发事件

Question

我最近开始修改一个基于 Angular 6 的项目并遇到了一些问题。
所以，我有(让我们假设)4 个 Mat-Select 字段，分别用于语言、货币、国家和组织。
最初，所有下拉列表都有 10 个默认值，我通过调用 API 来获取。 我的要求是，一旦用户滚动到选择下拉菜单时打开的 Mat-Options 框的末尾，再进行一次 API 调用。
我曾提到This Question它工作正常，但有一些问题，我注意到了。该答案涵盖了一个领域的解决方案。 如果我们使用多个字段，我们是否必须重复代码？
这是HTML

            <mat-select [disabled]="isDisabled" [(ngModel)]="model.currency" name="currency" (selectionChange)="OnChange('currency',$event.value)" #currency>   
              <mat-option [value]="getCurrency.currencyCode" *ngFor="let getCurrency of fetchCurrency | 
                    filternew:searchCurrencyvaluedrop">{{ getCurrency.currencyDescription }}
              </mat-option>
            </mat-select>

          <mat-select [disabled]="isDisabled" [(ngModel)]="model.language" name="language"
                (selectionChange)="OnChange('language', $event.value)" #language>                      
            <mat-option [value]="getLanguage.languageDescription" *ngFor="let getLanguage of fetchLanguage | 
                  filternew:searchLanguagevaluedrop">{{ getLanguage.languageDescription }}</mat-option>
          </mat-select>

为了简单起见，我只添加了两个字段。以下是 .ts 中的代码:

  viewIndex = 0;
  windowSize = 10;
  private readonly PIXEL_TOLERANCE = 3.0;

  ngAfterViewInit() {
    this.selectElemCu.openedChange.subscribe((event) =>
      this.registerPanelScrollEventCurrency(event)
    );
    this.selectElem.openedChange.subscribe((event) =>
      this.registerPanelScrollEventLang(event)
    );
}


//for language field

  registerPanelScrollEventLang(e) {
    if (e) {
      const panel = this.selectElem.panel.nativeElement;
      panel.addEventListener('scroll', event => this.loadNextOnScrollLang(event, this.selectElem.ngControl.name));
    }
  }

  loadNextOnScrollLang(event, select_name) {
    if (this.hasScrolledToBottomLang(event.target)) {
      this.viewIndex += this.windowSize;
      this.modifyPageDetails(select_name)
      this.appService.getAllLanguages(this.standardPageSizeObj, resp => {
        console.log('list of languages', resp)
        this.fetchLanguage.push(...resp['data'])
      }, (error) => {
      });
    }
  }

  private hasScrolledToBottomLang(target): boolean {
    return Math.abs(target.scrollHeight - target.scrollTop - target.clientHeight) < this.PIXEL_TOLERANCE;
  }

货币下拉代码保持不变。 所以，重复是我的第一个问题。第二个是滚动，有两个 API 调用而不是一个。我可以忍受，但因为有 6 个字段，所以重复太多了。
由于某些安全限制，我什至不能使用外部库。有没有更好的方法来实现这一点。如果需要进一步说明，请告诉我。谢谢

Answer 1

您可以这样做:
步骤 1
对于每个 mat-select您应该使用 ViewChild 创建一个局部变量.

@ViewChild('select_1', { static: false }) select_1: MatSelect;
@ViewChild('select_2', { static: false }) select_2: MatSelect;
@ViewChild('select_3', { static: false }) select_3: MatSelect;
@ViewChild('select_4', { static: false }) select_4: MatSelect;

步骤 2
创建一个在打开任何下拉菜单时将触发的函数。您可以使用 (openedChange)事件发射器并检查它的事件值是 true .该函数的第二个参数可以是打开的下拉菜单，因此我们没有为每个下拉菜单设置重复代码。

<mat-form-field>
  <mat-select placeholder="Select 1" #select_1 (openedChange)="onOpenedChange($event, 'select_1')">
    <mat-option *ngFor="let item of select_1_options;">
      {{item}}
    </mat-option>
  </mat-select>
</mat-form-field>

步骤 3
定义 onOpenedChange()将在 openedChange 上触发的函数事件。该函数应该检查 scrollTop下拉列表的 panel等于 ( scrollHeight - offsetHeight ) 因为这意味着用户滚动到滚动底部。发生这种情况时，您可以调用 API。

onOpenedChange(event: any, select: string) {
  if (event) {
    this[select].panel.nativeElement.addEventListener('scroll', (event: any) => {
      if (this[select].panel.nativeElement.scrollTop === this[select].panel.nativeElement.scrollHeight - this[select].panel.nativeElement.offsetHeight) {
        console.log(`Call API for ${select}`);
      }
    });
  }
}

这是工作代码: https://stackblitz.com/edit/angular-ivy-xritb1?file=src%2Fapp%2Fapp.component.ts