angular 添加列表项时虚拟滚动不re-render 列表

Question

我有一个问题... angular 虚拟滚动。我尝试了太多解决方案。但我无法解决问题。当我将新项目添加到收藏夹列表时，我将新项目推到收藏夹列表的前面。但是渲染视图的列表没有变化。添加新项目后如何更改视图？

我的问题： https://stackblitz.com/edit/angular-cdk-scroll-bug-vifffd?file=src/app/app.component.ts

Answer 1

Angular input 看到值变化时的变化，但是在我们的例子中，input 不是基本类型那么他只会知道数组的引用。

这是虚拟滚动输入：

  /** The DataSource to display. */
  @Input()
  get cdkVirtualForOf(): DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined {
    return this._cdkVirtualForOf;
  }
  set cdkVirtualForOf(value: DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined) {
    this._cdkVirtualForOf = value;
    if (isDataSource(value)) {
      this._dataSourceChanges.next(value);
    } else {
      // If value is an an NgIterable, convert it to an array.
      this._dataSourceChanges.next(
        new ArrayDataSource<T>(isObservable(value) ? value : Array.from(value || [])),
      );
    }
  }

  _cdkVirtualForOf: DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined;

对于您的情况，最好创建一个新的 class 并实施 DataSource

类似的东西：

export class CustomDataSource<T extends { id: number }> extends DataSource<T> {
  private _dataSource: BehaviorSubject<T[]>;

  constructor() {
    super();

    this._dataSource = new BehaviorSubject<T[]>([]);
  }

  connect(): Observable<readonly T[]> {
    return this._dataSource.asObservable();
  }

  disconnect(): void {}

  add(item: T): void;
  add(item: T[]): void;
  add(item: T | T[]): void {
    const currentValue = this._dataSource.value;
    const items = Array.isArray(item) ? item : [item];
    const nextValue = currentValue.concat(items);

    this._dataSource.next(nextValue);
  }

  remove(id: T['id']): void {
    const currentValue = this._dataSource.value;
    const nextValue = currentValue.filter(item => item.id !== id);

    this._dataSource.next(nextValue);
  }
}

stackblitz implementation

angular 添加列表项时虚拟滚动不re-render 列表

angular virtual scroll doesn't re-render the list when list item added

javascript

scroll

rxjs

reactjs

angular