{{ item.name }}
Loading...
在 Angular 7 中,结合虚拟滚动和异步订阅的解决方法如下:
npm install @angular/cdk@7.0.0
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { Observable } from 'rxjs';
import { ApiService } from 'your-api-service'; // 替换为你的 API 服务
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
@ViewChild(CdkVirtualScrollViewport, {static: false}) viewport: CdkVirtualScrollViewport;
@ViewChild('content', {static: false}) content: ElementRef;
items: any[] = [];
isLoading = false;
currentPage = 1;
pageSize = 10;
constructor(private apiService: ApiService) { }
ngOnInit() {
this.loadItems();
}
loadItems() {
this.isLoading = true;
this.apiService.getItems(this.currentPage, this.pageSize).subscribe(response => {
this.items = this.items.concat(response.items);
this.isLoading = false;
});
}
onScroll() {
const end = this.viewport.getRenderedRange().end;
const total = this.viewport.getDataLength();
if (end === total && !this.isLoading) {
this.currentPage++;
this.loadItems();
}
}
}
cdkVirtualFor
指令来实现虚拟滚动:
{{ item.name }}
Loading...
在上面的示例代码中,cdkVirtualFor
指令用于循环渲染 items
数组中的数据,并根据 itemSize
属性来计算每个条目的高度。onScroll()
方法会在滚动事件触发时被调用,通过判断是否已经滚动到列表底部来加载更多数据。
请注意,上述代码仅供参考,具体的实现方式可能因为你的需求和数据结构而有所不同。你需要根据自己的实际情况进行适当的调整和修改。