在Angular中，虚拟滚动是一种优化技术，它允许在大型列表中只呈现可见的部分数据，而不是将所有数据加载到DOM中。当用户滚动列表时，Angular只会渲染可见的数据，从而提高性能和响应速度。虚拟滚动不会直接向列表中添加数据，而是在滚动时动态加载新的数据。

以下是一个带有虚拟滚动的基本示例：

1. 在app.module.ts中导入Angular的ScollingModule：

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    ScrollingModule
  ],
  // ...
})
export class AppModule { }

2. 在组件的HTML模板中，使用cdkVirtualFor指令来代替ngFor指令：

  

    {{ item }}
  

3. 在组件的TS文件中，定义一个items数组来存储要显示的数据，并在组件初始化时加载一些示例数据：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  items: string[] = [];

  ngOnInit() {
    for (let i = 0; i < 10000; i++) {
      this.items.push(`Item ${i}`);
    }
  }
}

这样，在初始化时，会加载10000个示例数据，但只会呈现可见部分，随着用户滚动，新的数据会动态加载到DOM中。

请注意，以上示例仅为基本的示例，具体的实现方式可能会根据您的项目需求有所不同。您还可以根据需要自定义虚拟滚动的行为，例如指定每个列表项的高度、加载新数据的触发条件等。更多详细信息，请参考Angular官方文档中的虚拟滚动部分。