Angular 2中自动完成输入的无限滚动答案

【问题标题】：Infinite scroll for autocomplete input in Angular 2Angular 2中自动完成输入的无限滚动
【发布时间】：2017-09-21 15:08:24
【问题描述】：

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

【问题讨论】：

标签： angular tags

【解决方案1】：

angular material 2 autocomplete 无限滚动

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

【讨论】：