shlomiassaf / ngrid

A angular grid for the enterprise
https://shlomiassaf.github.io/ngrid
MIT License
241 stars 41 forks source link

Infinite-scroll TS compile error #231

Open Hintalo opened 2 years ago

Hintalo commented 2 years ago

Discussed in https://github.com/shlomiassaf/ngrid/discussions/230

Originally posted by **Hintalo** February 14, 2022 Hi Shlomi, First I say thank you for your great NGrid library. As I tried to implement a small demo-app with Infinite-scrolling, the TS compiler reported following error: Error in template: ``` error TS2322: Type 'PblInfiniteScrollDataSource' is not assignable to type 'PblDataSource, PblDataSourceAdapter>> | DataSourceOf<...>'. ``` ![image](https://user-images.githubusercontent.com/1548347/153883043-bbfef275-57b7-43e1-a5b1-50439984cc95.png) Then I tried to simplify my component but the error has not disappeared. I have taken the demo-app from your Infinite-Scroll documentation, as a starting point. My demo-component is even shorter, it is very minimalistic, but the error is still there: ``` import {Observable, Subscriber} from 'rxjs'; import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; import { columnFactory } from '@pebula/ngrid'; import {createInfiniteScrollDS, PblInfiniteScrollTriggerChangedEvent} from '@pebula/ngrid/infinite-scroll'; import { PblInfiniteScrollDataSource } from "@pebula/ngrid/infinite-scroll/lib/infinite-scroll-data-source/infinite-scroll-datasource"; export interface Person { id: number; name: string; gender: string; birthdate: number; } @Component({ selector: 'infinite-scroll-component', templateUrl: './infinite-scroll.component.html', styleUrls: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, }) export class InfiniteScrollComponent { public columns = columnFactory() .table( { prop: 'id', width: '100px', pIndex: true }, { prop: 'name', width: '100px' }, { prop: 'gender', width: '50px' }, { prop: 'birthdate', width: '25%' }, ) .build(); public ds: PblInfiniteScrollDataSource = createInfiniteScrollDS() .withInfiniteScrollOptions({ blockSize: 100, initialVirtualSize: 100, }) .withCacheOptions('sequenceBlocks') .onTrigger((event: PblInfiniteScrollTriggerChangedEvent) => { if (event.isInitial) { this.ds.setCacheSize(200 * 4); return [] as Person[]; } else { console.log(event.fromRow, event.toRow); return [] as Person[]; } }) .create(); constructor() { } } ``` The template code is also a copy of the infinite-scroll example: ``` ``` Could you please give some hint, was could be wrong with this component. I'm using NGrid 4.0.0 with Angular 12.2.16 and Typescript 4.3.5 in my project (which was created using Angualr CLI). Thank you, Peter