Tengo un problema... con el desplazamiento virtual angular. Intenté demasiadas soluciones. pero no puedo resolver el problema. cuando agregué un nuevo elemento a la lista de favoritos, empujé el nuevo elemento al frente de la lista de favoritos. pero no hay cambios en la lista de la vista renderizada. ¿Cómo puedo cambiar la vista cuando se agrega un nuevo elemento?
mi problema: https://stackblitz.com/edit/angular-cdk-scroll-bug-vifffd?file=src/app/app.component.ts
Entrada angular ve los cambios cuando cambia el valor, pero en nuestro caso la entrada no es de tipo primitivo, entonces solo conocerá la referencia de la matriz.
Esta es la entrada de desplazamiento virtual:
/** 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; En su caso, lo mejor sería crear una nueva clase e implementar DataSource
algo como eso:
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); } }