angular - Angular CDK 虚拟滚动从列表中删除项目

Question

在 Angular CDK 虚拟滚动中，我使用列表并从按钮将项目添加到列表中，它可以工作。我有另一个按钮来从列表中删除项目，但 UI 没有用删除的内容刷新。

list: any[];


<cdk-virtual-scroll-viewport autoSize class="list-container lg" itemSize="5">
    <ul *cdkVirtualFor="let item of list; let i = index;  
          let lastItem = last" class="list-group-item list-group-items list-group">
        {{item}}
    </ul>
</cdk-virtual-scroll-viewport>

添加到列表

const item = 4;
this.list = [...this.list, item];

如何从列表中删除项目并刷新视图？

注意：我使用的是不可观察的数据源。

Answer 1

只需创建没有您不需要的项目的新数组。例如像这样

this.list = this.list.filter((item, index) => index !== indexToDelete)