Angular - 数据未显示在表和源映射错误中

Question

我正在开发 Angular 应用程序，并面临在表格中显示数据的问题。在我的组件的 ngOnInit 中，我从服务获取数据并将其分配给 rows 变量。调试日志确认对象正在被接收并传递给 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 组件：

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>

有人可以帮我识别并解决数据未显示在表格中以及源映射错误的问题吗？

附加信息：

角度版本：17

Answer 1

您异步更新数据，因此一种选择是使用异步管道，当可观察对象发出新值时自动触发更改检测。

data$ =  this.qrtService.get(this.id);
<div *ngFor="let item of data$ | async">

这是一个带有工作示例的 stackblitz。