Question 301018 in Html Question posted in
Some basic documentation can be found here.

Html – Angular – Data Not Displaying in Table and Source Map Error

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

Tags:

2

Answers


  1. 0

    You update the data asynchronously so one option is to use the async pipe that automatically triggers change detection when the observable emits new values.

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

    Here is a stackblitz with a working example.

    Login or Signup to reply.
  2. 0

    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);
      }
    });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search