We are currently working on transferring data from one component to another using the approach outlined below. We want to display an error message when there is no data available.
<div *ngIf="showGlobalError">
<h6>The reporting project doesn't have any Shippable Items</h6>
</div>
The code in the component.ts file looks like this:
showGlobalError = true;
constructor(private psService: ProjectShipmentService, private pdComp: ProjectDetailsComponent) {
this.psService.tDate.subscribe(x => this.cachedResults = x);
}
ngOnInit() { }
ngDoCheck() {
if (this.cachedResults.length > 0 && this.count <= 1) {
this.showGlobalError = false;
this.populateArrays();
this.count++;
}
}
populateArrays() {
this.reportingProject = [this.pdComp.rProjectNumber];
this.projectSalesOrder = this.pdComp.rSalesOrder;
this.clearFilter();
........
We are facing an issue where even though there is data present in this.cachedResults (i.e., this.cachedResults.length is not equal to '0'), for a few seconds, the error message 'The reporting project doesn't have any Shippable Items' is shown on the page before displaying the actual data. We suspect that there may be an issue with the ngDoCheck() function causing this delay. Any assistance or insights would be greatly appreciated.