I am getting list of "incident_ids" from a HTTP get call as shown in the ts file and populating in the HTML in the mat-nav-list. Problem is mat-nav-list inside cdk-virtual-scroll-viewport not getting updated with the HTTP data but when I remove cdk-virtual-scroll-viewport the mat-nav-list is showing the data.

Here's my HTML file

<mat-card class="home-card">
<table class="home-table">
    <tr> 
        <th class="header-incident"> INCIDENTS </th>
        <th class="header-incident-details"> 
            <mat-card class="incident-details-card"> INCIDENT DETAILS </mat-card>
        </th>
    </tr>
    <tr>
        <td>
            <input placeholder="Search Ex: INC12345678" class="incident-search" (keyup)="refresh_data()">
        </td>
    </tr>
    <tr>
        <td class="incident-list">
            <cdk-virtual-scroll-viewport [itemSize]="1" >
                <mat-nav-list>
                    <a mat-list-item href="#" *cdkVirtualFor="let link of incident_ids" > {{ link }} </a>
                </mat-nav-list>
            </cdk-virtual-scroll-viewport>
        </td>
    </tr>
</table>

Here's my ts file

    import { Component, OnInit } from '@angular/core';
import { IncidentService } from '../incident.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit{

  incident_ids: any = [] 

  constructor(private incidentService: IncidentService) { }

  ngOnInit(): void {
    this.incidentService.get_incident_numbers()
      .subscribe(data => {
        for (let val of data.d.results){
          this.incident_ids.push(val.INCIDENT_NUMBER)
        }
      })
  }

  refresh_data() {
    console.log(this.incident_ids[0])
  }

}

Here's my API call inside service file

    get_incident_numbers(): Observable<any>{
    const url = this.baseUrl + "?$format=json&$select=INCIDENT_NUMBER"
    return this.http.get(url, this.httpOptions)
  }

Can anyone please point out what I am missing?