Problem with DataTable presentation in Angular Component

byoungman

Description of problem:
I have taken over an Angular SPA for development and maintenance and in going through the application I have come across a bug that I just can't seem to get to the root of the problem. The purpose of the component is to display a popup modal of records that match that of the record that was clicked on in the main SPA page allowing the user to select a record that is a better match than the one that they are working on and save it to the system.

What is happening is that when the user clicks on the 'Details' button on the main SPA page the DataTable is being displayed twice -- the first time it will present the data from the previous record selected and then the table refreshes with the data from the current record selected. Not a blocker but definitely not desired behavior.

Code Snippets

<tr *ngFor="let row of data">
...
</tr>

<tr>
    <td>Input Company:</td>
    <td>{{resultData?.inputname}}</td>
    <td>Industry</td>
    <td>{{resultData?.inputdata?.industry}}</td>
</tr>

public async processData(inputRow: any) {
    try {
        ...

        // First time table is displayed with previous record's data
        let data: any = await this.apiclient.callAPIMethod(`masterdata/job/${inputRow.jobid}/task/${inputRow.taskid}/row/${inputRow.taskrowid}`);
        
        this.resultData = data.data;
        data = this.flattenObj(data.data);
        this.rows = data['data.outputs'] || [];

        this.prepData(this.rows);
    }
    catch( e: any ) {
        this.showErrorMessage( this.modalPopup, e );
    }
}
// Return to calling component - second time data is displayed with the current record's data

I've tried playing around with the [hidden] property for the table and have tried using *ngIf to tell the table to not display until the current data has been loaded - all to no avail. I'm at a loss here.

-Bill

kthorngren

I'm not familiar with Angular Datatables and not sure what your code snippet is doing. You might want to check with their support. But if I had to guess I would say that the popup modal is displayed before the async process of fetching the new data, populating the HTML table and reinitializing Datatables (not sure how you are updating the Datatable) takes place. This doesn't sound like a specific Datatables issues since it sounds like the Datatable ultimately displays the correct data.

Not sure what happens in line 3 (...) but I would look at a way to show a message to the user that the data is being fetched. Possibly use clear() to clear the current Datatable rows. I assume prepData() repopulates the HTML table and does something to reinitialize Datatables with the updated HTML table. In this function you can remove the message to the user.

Kevin

byoungman

Ok so I came up with a solution for this - not sure if it's best practices but it works.

What I did is in the parent div for the component I added *ngIf="dataLoaded" and set it to false during initial component load and then after all of the data has been loaded I set dataLoaded = true. This is suppressing the previous record's information from being displayed.