Html Angular 表和源映射中未显示的数据错误

我正在开发一个Angular 应用程序，并且面临着在表格中显示数据的问题.在我的组件的ngOnInit中，我从服务中获取数据并将其赋给ROWS变量.调试日志(log)确认对象正在被接收并传递给HTML，如下所示:

Received object in ngOnInit: 
{
  "$id": "1",
  "RequiredReportsId": "0a6f6319-51b7-4ec1-8b5b-a84709e9f819",
  "ReportingPeriod": "2 kwartał 2024",
  // Other properties...
  "Rows": {
    "$id": "2",
    "$values": [
      // Array of row objects...
    ]
  }
  // Additional properties...
}

然而，尽管如此，数据并没有显示在我的HTML模板的表中.

此外，我在开发人员控制台中遇到一个源代码映射错误:

Source Map Error: Error: request failed with status 404
Resource URL: https://localhost:44498/@vite/client
Source Map URL: client.mjs.map

以下是我的代码片段:

TypeScript Component:个

ngOnInit() {
  this.addRow();
  this.id = this.route.snapshot.paramMap.get('id')!;
  this.qrtService.get(this.id)
    .subscribe({
      next: (data: QRT) => {
        console.log('Received object in ngOnInit:', data);
        this.report = data;
        if (Array.isArray(data.Rows)) {
          this.rows = data.Rows;
        } else {
          this.rows = [data.Rows];
        }
      },
      error: error => {
        console.error('Error fetching report data', error);
      }
    });
}

Html:

<tr *ngFor="let row of rows; let i = index">
  <td>{{ row.Number }}</td>
  <td>{{ row.TestedProcessName }}</td>
  <td>{{ row.TestingDescription }}</td>
  <td>{{ row.SampleData }}</td>
  <td>{{ row.TestingActivities }}</td>
  <td>{{ row.DetectedIrregularities }}</td>
  <td>{{ row.IrregularityCategory }}</td>
  <td>{{ row.CorrectiveActions }}</td>
  <td>{{ row.CorrectiveActionDeadline }}</td>
</tr>

有没有人可以帮我找出并解决表中没有显示的数据和源图错误的问题？

其他信息:

Angular 版本:17