无限滚动用于Angular 2中的自动完成输入 [英] Infinite scroll for autocomplete input in Angular 2

问题描述

在哪里可以找到用于自动完成输入的无限滚动的角度扩展(例如， https://select2.org/data-sources/ajax )?我有一个带有分页的API，并且当用户向下滚动时必须捕获其他对象

Where can I find the angular extension for infinite scrolling of the autocomplete input (for example, https://select2.org/data-sources/ajax)? I have an API with pagination and must capture other objects when the user scrolls down

推荐答案

角度材料2个自动完成

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="State" aria-label="State" [matAutocomplete]="statesAutocomplete" [formControl]="stateCtrl">
    <mat-autocomplete #statesAutocomplete="matAutocomplete" (opened)="autocompleteScroll()"> 
      <mat-option *ngFor="let state of filteredStates" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  <br>
</form>

@ViewChild('statesAutocomplete') statesAutocompleteRef: MatAutocomplete;
@ViewChild(MatAutocompleteTrigger) autocompleteTrigger: MatAutocompleteTrigger;

    autocompleteScroll() {
    setTimeout(() => {
      if (
        this.statesAutocompleteRef &&
        this.autocompleteTrigger &&
        this.statesAutocompleteRef.panel
      ) {
        fromEvent(this.statesAutocompleteRef.panel.nativeElement, 'scroll')
          .pipe(
            map(x => this.statesAutocompleteRef.panel.nativeElement.scrollTop),
            takeUntil(this.autocompleteTrigger.panelClosingActions)
          )
          .subscribe(x => {
            const scrollTop = this.statesAutocompleteRef.panel.nativeElement
              .scrollTop;
            const scrollHeight = this.statesAutocompleteRef.panel.nativeElement
              .scrollHeight;
            const elementHeight = this.statesAutocompleteRef.panel.nativeElement
              .clientHeight;
              const atBottom = scrollHeight === scrollTop + elementHeight;
            if (atBottom) {
              // fetch more data
              this.filteredStates = [...this.filteredStates, ...this.states]
            }
          });
      }
    });
  }

stackblitz链接

这篇关于无限滚动用于Angular 2中的自动完成输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！