infinite-scroll 相关问题

设备 <div class="col-6"> <label>device</label> <div class="input-group" style="height: 400px; overflow-y: auto;" (scroll)="onScroll($event)"> <ng-select formControlName="device_id" [items]="extractedOptions" bindLabel="label" bindValue="value" placeholder="Select device" appendTo="body" [multiple]="true" > <ng-template ng-label-tmp let-item="item"> {{ item.label }} </ng-template> <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index"> {{ item.label }} </ng-template> </ng-select> <div style="color: red" *ngIf="shouldDisplayError('device_id') && hardwareform.get('device_id')!.hasError('required')"> *Field is required </div> </div> </div> import { Component, ElementRef, HostListener, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Router, ActivatedRoute } from '@angular/router'; import { MatSnackBar } from '@angular/material/snack-bar'; import { DeviceService } from 'src/app/admin/services/device-device/device.service'; import { catchError, map } from 'rxjs/operators'; import { Observable, throwError } from 'rxjs'; @Component({ selector: 'app-create-device', templateUrl: './create-device.component.html', styleUrls: ['./create-device.component.scss'], }) export class DeviceComponent { @ViewChild('deviceSelect') deviceSelect!: ElementRef; deviceform!: FormGroup; loading: any; options: any = []; totalCount: any; extractedOptions: any; constructor( private fb: FormBuilder, private route: Router, private activatedRoute: ActivatedRoute, private _snackBar: MatSnackBar, private deviceService: DeviceService, ) {} title: string = 'New Device'; page: number = 1; IsEdit: boolean = false; items_per_page: number = 10; ngOnInit() { this.loadOptions(); } loadOptions() { this.loading = true; this.deviceService.getData(10, this.page).subscribe((response: any) => { const records = response.data.records; this.totalCount = response.data.count.total; this.extractedOptions = records.map((record: any) => ({ label: record.name, value: record.id, })); this.options = this.options.concat(this.extractedOptions); this.page++; this.loading = false; }); } shouldDisplayError(controlName: string): boolean { const control = this.deviceform.get(controlName); return control ? control.touched : false; } @HostListener('scroll',['$event']) onScroll(event: any) { console.log("testing") const target = event.target || event.srcElement; if (target.offsetHeight + target.scrollTop >= target.scrollHeight) { // Fetch more options when scrolled to the bottom this.loadOptions(); } } } 这是我的 HTML 和 TypeScript 文件。我成功地通过这些文件在 ng-select 下拉列表中获取了 10 条记录。但是，当我到达 ng-options 的底部时，滚动事件不会触发。我希望它触发滚动事件，以便我可以将更多动态内容加载到我的 ng-options 中。我还检查了控制台是否有错误消息，但没有报告错误。 ng-select已经支持虚拟滚动。请利用此功能来适合您的代码！请在下面找到一个工作示例！ import { Component, ElementRef, ViewChild } from '@angular/core'; import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { of } from 'rxjs'; import { delay } from 'rxjs/operators'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { NgSelectModule } from '@ng-select/ng-select'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-root', standalone: true, imports: [ FormsModule, NgSelectModule, CommonModule, ReactiveFormsModule, RouterModule, ], template: ` <div class="col-6"> <label>device</label> <div class="input-group" style="height:100vh;"> <ng-select [virtualScroll]="true" [items]="extractedOptions" bindLabel="label" bindValue="id" placeholder="Select device" (scroll)="onScroll($event)" (scrollToEnd)="onScrollToEnd()" [multiple]="true" > <ng-template ng-label-tmp let-item="item"> {{ item.label }} </ng-template> <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index"> {{ item.label }} </ng-template> </ng-select> </div> </div> `, }) export class App { @ViewChild('deviceSelect') deviceSelect!: ElementRef; deviceform!: FormGroup; loading: any; options: any = []; totalCount: any; extractedOptions: any = []; numberOfItemsFromEndBeforeFetchingMore = 10; constructor() {} title: string = 'New Device'; page: number = 1; IsEdit: boolean = false; items_per_page: number = 10; ngOnInit() { this.loadOptions(); } loadOptions() { console.log('asdf') this.loading = true; const start = this.page; const data = new Array(50).fill(null).map((item, i) => ({ name: start + i, id: start + i, })); of({ data: { records: data, count: { total: 100, }, }, }) // .pipe(delay(1000)) .subscribe((response: any) => { const records = response.data.records; const extractedOptions = records.map((record: any) => ({ label: record.name, value: record.id, })); this.totalCount = response.data.count.total; this.extractedOptions.push(...extractedOptions); this.extractedOptions = [...this.extractedOptions] this.page++; this.loading = false; }); } onScrollToEnd() { this.loadOptions(); } onScroll(event: any) { console.log(event, this.extractedOptions.length); if (this.loading || this.extractedOptions.length > this.totalCount) { return; } if (event.end >= this.extractedOptions.length) { this.loadOptions(); } } shouldDisplayError(controlName: string): boolean { const control = this.deviceform.get(controlName); return control ? control.touched : false; } // @HostListener('scroll', ['$event']) // onScroll(event: any) { // console.log('testing'); // const target = event.target || event.srcElement; // if (target.offsetHeight + target.scrollTop >= target.scrollHeight) { // // Fetch more options when scrolled to the bottom // this.loadOptions(); // } // } } bootstrapApplication(App); 堆栈闪电战

angular api infinite-scroll ng-options angular-ngselect

回答 1 投票 0

延迟加载VS无限滚动

我以为延迟加载和无限滚动是同一回事，但今天我听说这是两个不同的东西。这是真的吗？

jquery lazy-loading infinite-scroll

回答 2 投票 0

带有infinite_scroll_pagination的Flutter Riverpod [需要建议]

我目前陷入了一些困惑。关于这个 Flutter 问题的任何帮助都会非常有帮助。多谢！最近我爱上了Riverpod。我到处都在使用 Riverpod。Riv...

flutter flutter-dependencies infinite-scroll riverpod

回答 1 投票 0

无法让 ngx-infinite-scroll 监听窗口滚动

我正在尝试实现 ngx-infinite-scroll 我无法让它执行我想要的操作，即监听浏览器或窗口滚动，以便我可以滚动内容并在需要时加载。发生了什么事我...