無限滾動用於Angular 2中的自動完成輸入

Question

在哪里可以找到自動完成輸入的無限滾動角度擴展（例如， https://select2.org/data-sources/ajax ）？ 我有一個帶有分頁的API，並且當用戶向下滾動時必須捕獲其他對象

Answer 1

無限滾動角材料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鏈接