Actualmente es parte de mi proyecto. Si hace clic en un elemento de la lista, se alterna la visibilidad del elemento. Muchas listas parecen mostrarse bien con el desplazamiento virtual del ángulo, pero hay un problema cuando se elimina una gran cantidad de elementos de la lista. El desplazamiento virtual no se actualiza, dejando espacio libre en el medio. Se requiere actualizar la ventana gráfica cada vez que se agrega o elimina un elemento. Los datos de la lista que uso no son datos observables. Por favor, dime cómo resolver el problema.
https://stackblitz.com/edit/angular-ivy-o9dhar?file=src%2Flist%2Flist.component.html
mi problema
Tendrás que actualizar la fuente para que funcione. El problema de alternar es que deberá reemplazarlo con algo de altura similar. Tienen altura dinámica en experimental en angular cdk desde hace bastante tiempo. Pero para eliminar puedes hacer algo simple como esto. La parte clave es simplemente actualizar la fuente para que pueda volver a representar la lista
export class ListComponent { @Input() ListData: any[]; remove(element) { this.ListData = this.ListData.filter((x) => x != element); } }artículo
export class ListItemComponent { @Input() element; @Output('remove') onListItemClicked = new EventEmitter(); toggleVisibility() { this.onListItemClicked.emit(this.element); } }lista.componente.html
<cdk-virtual-scroll-viewport class="list-container" itemSize="30"> <div *cdkVirtualFor="let data of ListData"> <list-item [element]="data" (remove)="remove($event)"></list-item> </div> </cdk-virtual-scroll-viewport>https://stackblitz.com/edit/angular-ivy-tntnpm?file=src%2Flist%2Flist.component.ts
Del comentario: Agregar aún establece un nuevo objeto aquí es una forma simple basada en su enlace de stackblitz.
const newItem = { id: Number(this.input.nativeElement.value) + 1, title: `item ${Number(this.input.nativeElement.value) + 1}`, isShow: true, }; this.favoriteList = [newItem,...this.favoriteList] // instead of splice