0

我从 HTTP get 调用中获取“incident_ids”列表，如 ts 文件所示，并填充到 mat-nav-list 中的 HTML 中。问题是 cdk-virtual-scroll-viewport 中的 mat-nav-list 没有使用 HTTP 数据进行更新，但是当我删除 cdk-virtual-scroll-viewport 时，mat-nav-list 正在显示数据。

这是我的 HTML 文件

<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>

这是我的 ts 文件

    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])
  }

}

这是我在服务文件中的 API 调用

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

谁能指出我错过了什么？

4

0 回答 0