Angular - Data Not Displaying in Table and Source Map Error

Question

I'm working on an Angular application and facing an issue with displaying data in a table. In my component's ngOnInit, I fetch data from a service and assign it to a rows variable. The debugging logs confirm that the object is being received and passed to HTML, as shown below:

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

However, despite this, the data is not being displayed in the table in my HTML template.

Additionally, I am encountering a source map error in the developer console:

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

Here are snippets of my code:

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>

Can someone help me identify and resolve the issue with the data not being displayed in the table and the source map error?

Additional Information:

Angular Version: 17

Answer 1

You are not passing an array to *ngFor you are passing an object, could you modify the below lines

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.$values)) { // <-- changed here
          this.rows = data.Rows.$values; { // <-- changed here
        } else {
          this.rows = [data.Rows.$values]; { // <-- changed here
        }
      },
      error: error => {
        console.error('Error fetching report data', error);
      }
    });
}