我有一个项目列表,我使用* ngFor显示
<div id="container"> <div [class.selected]="selectedItem.id == item.id" #container *ngFor="let item of items; indexBy: byId">{{item.name}}</div> </div>
我会定期更新列表数组.
this.listService.index((items) => this.items = items)
我有一个selectedItem,用于突出显示选择的项目.
当我更新列表时,可以在所选项目(大部分)上方和所选项目下方添加新项目.当发生这种情况时,所选项目将远离当前视图位置.
我想调整父div的scrollOffset是这样一种方式,列表中项目的位置保持在相同的视图位置.
更新:
要做到这一点,我正在拯救
this.offset; = this.container.scrollHeight - this.container.scrollTop;
并在更新this.items后添加了一行
this.listService.index((items) => { this.items = items this.container.scrollTop = this.container.scrollHeight - this.offset; })
这不起作用,但用超时包装这个工作正是我想要的.
setTimeout(() => { this.scrollPosition.restore() },300)
更新this.items后,渲染新的dom元素会有延迟.
如何获得添加新元素的事件?