HTML template failing to retrieve data from Angular dataSource

Question

HTML template failing to retrieve data from Angular dataSource

My goal is to import data from an Excel file into my angular application. I have successfully retrieved the data from the Excel file, parsed it to extract the necessary columns, and stored it in an array within my service.ts file.

I call the service from my component.ts file as a return, where I confirm the data retrieval using console.log().

To display the data as a MatTableDataSource in the child component, I am utilizing @Output() to pass the data to the child.

I have tested that the HTML template functions properly by loading the data into a json-server and retrieving it through a service.

Despite several attempts to troubleshoot, the datasource is not displaying on the HTML. Although my HTML screen indicates the presence of records, the actual data rows are not visible.

Console.Log information:

bom-load:
[]
0: {qty: "6", mfg: "Mencom", partNumber: "1321-3R8-C", desc: "480V 3-PHASE AC DRIVE REACTORS, OPEN TYPE, 8A, 3 HP Drive"}
1: {qty: "1", mfg: "AB", partNumber: "1756-EN2T", desc: "1756 CONTROL LOGIX ETHERNET / IP BRIDGE MODULE (128 TCP/IP CONNECTIONS)"}
...

bom-list.component.ts line 43 log output:
bom-list: 
MatTableDataSource {_renderData: BehaviorSubject, _filter: BehaviorSubject, ...}

Image of html table trying to use data loaded from Excel
<a href="https://i.sstatic.net/aojbf.png" rel="nofollow noreferrer"></a>

Image of static data using this.getAllBomItems
<a href="https://i.sstatic.net/AmkJa.png" rel="nofollow noreferrer"></a>

Interesting development:
by adding; as suggested; ngOnChanges(), I now get data, but ONLY after clicking the pagination buttons.

angular typescript

Answer 1

Answer №1

Important Update

To enhance performance, consider using ngOnChanges instead of ngOnInit in your child component.

Additionally, don't forget to utilize ChangeDetectorRef.

constructor (
  ...
  private cdr: ChangeDetectorRef
) {}

ngOnChanges() {
    this.dataSource = new MatTableDataSource(this.data);
    this.dataSource.paginator = this.paginator;
    this.cdr.detectChanges();
}

Please Note

<div *ngIf="data != null">

Modify the above line to:

<div *ngIf="data">

Your data value is currently undefined, so using *ngIf="data != null" will result in a truthy expression. As a result, the ngOnInit lifecycle hook in your child component will be triggered without the presence of valid data.

Furthermore, remember to adjust the following code block as well:

getAllBomItems() {
    this.bomService.getList().subscribe((response: any) => {
      this.dataSource = new MatTableDataSource(response);
      // this.dataSource.data = response; <- This line alone won't trigger change detection for your table. It's crucial to replace the entire dataSource object.
    });
  }

Answer 2

Important Update

To enhance performance, consider using ngOnChanges instead of ngOnInit in your child component.

Additionally, don't forget to utilize ChangeDetectorRef.

constructor (
  ...
  private cdr: ChangeDetectorRef
) {}

ngOnChanges() {
    this.dataSource = new MatTableDataSource(this.data);
    this.dataSource.paginator = this.paginator;
    this.cdr.detectChanges();
}

Please Note

<div *ngIf="data != null">

Modify the above line to:

<div *ngIf="data">

Your data value is currently undefined, so using *ngIf="data != null" will result in a truthy expression. As a result, the ngOnInit lifecycle hook in your child component will be triggered without the presence of valid data.

Furthermore, remember to adjust the following code block as well:

getAllBomItems() {
    this.bomService.getList().subscribe((response: any) => {
      this.dataSource = new MatTableDataSource(response);
      // this.dataSource.data = response; <- This line alone won't trigger change detection for your table. It's crucial to replace the entire dataSource object.
    });
  }

Answer 3

Answer №2

Attempt using ChangeDetectorRef in the component that includes your data table and trigger it this way:

  constructor(private cdRef: ChangeDetectorRef) {
  }

//once new data is added to the table
this.cdRef.detectChanges();

Answer 4

Attempt using ChangeDetectorRef in the component that includes your data table and trigger it this way:

  constructor(private cdRef: ChangeDetectorRef) {
  }

//once new data is added to the table
this.cdRef.detectChanges();

HTML template failing to retrieve data from Angular dataSource

Answer №1

Answer №2

Similar questions

Is it possible to use the `fill` method to assign a value of type 'number' to a variable of type 'never'?

Uploading Files with Django Rest Framework and Angular 2

Transform the request in an Angular2 and jQuery Ajax POST call

What is the essential setup needed for a bootstrap dropdown list?

Require a property to be mandatory depending on the value of another property within a generic interface

Error TS2304: Unable to locate identifier 'QRScanner'

Creating a dynamic form in Angular based on user input

Integrating fresh components into a JSON structure

Certain information is failing to be added to the list

Unselect all options in Angular's multiple selection feature

Is it possible to safely change the name of an Angular project?

The attribute 'date' is not found within the class 'EmployeeScheduleExceptionModel', however, it is present in the parent class from which it inherits

How to upload files using 3 input fields in Angular?

Having difficulty incorporating TypeScript into Vue

What is the best way to obtain a comprehensive list of nested routes specified in the router configuration?

A dynamic d3 line chart showcasing various line colors during transitions

What is the reason for ngbDatepicker converting numbers into dates upon input?

Injection of environmental variables into app services

Troubleshooting the ngx-image-zoom dependency error: How to resolve the unresolved dependency issue

Implementing a dependent <select> within an HTML table is a useful feature to enhance user experience and organization of