Angular中嵌入cdk-virtual-scroll-viewport的mat-nav-list无法通过HTTP数据更新的问题求助

看起来你遇到的问题主要来自两个关键细节：cdk-virtual-scroll的itemSize设置错误，以及数组更新方式未触发虚拟滚动的变更检测。下面是具体的修复步骤：

1. 修正itemSize的取值 #

cdk-virtual-scroll-viewport的itemSize属性需要设置为列表项的实际高度（单位：像素），而不是你当前写的1。Angular CDK虚拟滚动依赖这个值计算可视区域内需要渲染的元素数量，设置为1会导致滚动容器的尺寸计算完全错误，自然无法正常渲染列表项。

对于默认样式的mat-list-item，高度通常是48px，你需要这样修改：

<cdk-virtual-scroll-viewport [itemSize]="48" class="virtual-viewport">
  <mat-nav-list>
    <a mat-list-item href="#" *cdkVirtualFor="let link of incident_ids" > {{ link }} </a>
  </mat-nav-list>
</cdk-virtual-scroll-viewport>

同时给虚拟滚动容器设置固定高度，否则它会被内容撑开，失去虚拟滚动的意义：

.virtual-viewport {
  height: 500px; /* 根据你的页面布局调整高度 */
}

2. 改用数组替换而非push添加元素 #

*cdkVirtualFor对数组的变更检测依赖数组引用的变化，你当前用push方法只是修改原数组的内容，并没有改变数组的引用，这会导致虚拟滚动组件无法感知到数据更新。

修改TS代码，直接生成新数组替换原数组：

ngOnInit(): void {
  this.incidentService.get_incident_numbers()
  .subscribe(data => {
    // 用map生成新数组，直接替换原数组引用
    this.incident_ids = data.d.results.map(val => val.INCIDENT_NUMBER);
  })
}

3. （可选）手动触发虚拟滚动更新 #

如果以上步骤仍未解决问题，你可以手动注入CdkVirtualScrollViewport并通知它更新视图：

首先在组件中注入虚拟滚动视图：

import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { ViewChild } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit{
  incident_ids: any = [];
  
  constructor(
    private incidentService: IncidentService,
    @ViewChild(CdkVirtualScrollViewport) private viewport: CdkVirtualScrollViewport
  ) { }

  ngOnInit(): void {
    this.incidentService.get_incident_numbers()
    .subscribe(data => {
      this.incident_ids = data.d.results.map(val => val.INCIDENT_NUMBER);
      // 数据更新后手动触发视图检查
      setTimeout(() => {
        this.viewport?.checkViewportSize();
      });
    })
  }
}

完成以上修改后，你的mat-nav-list应该能在虚拟滚动容器内正常渲染HTTP返回的数据了。你可以在refresh_data方法里打印整个incident_ids数组，确认数据已被正确获取。

内容的提问来源于stack exchange，提问作者kethan bravo