使用异步管道制作自定义角度 cdk-table 数据源？

Question

我真的很想合并 cdk-virtual-scroll。但是使用 cdk-virtual-scroll 表头不会遵循 css 粘性位置属性。所以我看到了一篇描述自定义滚动策略的帖子。

https://stackblitz.com/edit/cdk-virtual-table-sticky-header?file=src%2Fapp%2Fapp.component.ts

在本例中，它们扩展了数据源。

这里有硬编码的数据。

  rows = Array(200).fill(0).map((x, i) => {
    return {name: 'name' + i, id: i, age: 27};
  });

有没有办法从 http 调用中获取数据并使用可观察对象填充数据源并使用模板中的异步管道解开这些可观察对象。 （而不是在component.ts文件中硬编码数据或订阅componenet.ts文件中的数据来实现像上面那样的自定义滚动）？

对这个端点进行 http 调用：

https://jsonplaceholder.typicode.com/users

像这样：

[dataSource]="dataSource | async"

Answer 1

该表通过调用dataSource.connect 从DataSource 以Observable 的形式获取数据。这个函数应该返回一个 Observable，它发出要显示的数据。使用 DataSource 时不需要 AsyncPipe。

将初始数据作为 Observable 传递给您的 DataSource，并在返回之前使用 dataSource.connect 中的 RxJS 运算符修改此数据。在dataSource.disconnect 中终止 Observable。

根据您提供的 stackblitz，这可能是：

const PAGESIZE = 20;
const ROW_HEIGHT = 48;

export class GridTableDataSource extends DataSource<any> {
  private initialData$: Observable<any[]>;
  private onDisconnect$ = new Subject<void>();

  offset = 0;
  offsetChange = new BehaviorSubject(0);

  constructor(
    initialData$: Observable<any[]>,
    private viewport: CdkVirtualScrollViewport, 
    private itemSize: number
  ) {
    super();
    this.initialData$ = initialData$;
    this.viewport.scrollToOffset(0);
  }

  connect(collectionViewer: CollectionViewer): Observable<any[] | ReadonlyArray<any>> {
    return combineLatest( // combine the scroll events with your initial data
      this.viewport.elementScrolled().pipe( // start with a currentTarget
        startWith({ currentTarget: this.viewport.getElementRef().nativeElement })
      ),
      this.initialData$.pipe(
        tap(data => this.viewport.setTotalContentSize(this.itemSize * data.length))
      )
    ).pipe(
      map(([event, initialData]: [any, any[]]) => { // map to visible data
        const start = Math.floor(event.currentTarget.scrollTop / ROW_HEIGHT);
        const prevExtraData = start > 5 ? 5 : 0;
        // const prevExtraData = 0;
        const slicedData = initialData.slice(
          start - prevExtraData,
          start + (PAGESIZE - prevExtraData)
        );
        this.offset = ROW_HEIGHT * (start - prevExtraData);
        this.viewport.setRenderedContentOffset(this.offset);
        this.offsetChange.next(this.offset);
        return slicedData;
      }),
      takeUntil(this.onDisconnect$)  // unsubscribe on disconnect
    );
  }

  disconnect(collectionViewer: CollectionViewer): void {
    this.onDisconnect$.next();
  }
}

将 http 请求作为初始数据传递给您的自定义数据源。

this.dataSource = new GridTableDataSource(
  this.http.get<any[]>("https://jsonplaceholder.typicode.com/todos"),
  this.viewport,
  this.itemSize
);

https://stackblitz.com/edit/cdk-virtual-table-sticky-header-26g3j5