Challenges with incorporating asynchronously fetched data in component operations

Question

Challenges with incorporating asynchronously fetched data in component operations

I have encountered an issue where the data retrieved from a server in a service is available in the component's template but not in the actual code. This seems strange to me.

I made the call in the ngOnInit method of my main AppComponent

ngOnInit() { 
    this.dataContractService.getUIStrings();
}

This method is called before any other component's ngOnInit, so the strings should be available to them.

Here is the code for getUIStrings:

async getUIStrings() {
    let url = "/datacontract/getuistrings";
    let promise = await this.http.get<APIResponse>(url).pipe(map(x => { return x.responsePayload })).toPromise<any>();
    this.globals.UIStrings = promise.strings; //
}

The results are stored in globals, which is an injectable service used by components that need access to UIStrings.

Here is an example of how I am using it:

export class DashboardComponent {

    constructor(
        public globals: Globals,
    ) { }

    dashboardMessage: string;

    ngOnInit() {
        if (condition) {
            this.dashboardMessage = this.globals.UIStrings["DashboardAdminDesc"];
        }
        else {
            this.dashboardMessage = this.globals.UIStrings["DashboardDesc"];
        }

    }

}

In the code, UIStrings is an empty array, but in the component's template above, it is available and populated.

{{globals.UIStrings["DashboardAdminDesc"]}}

This setup seems to work. Can anyone point out what I might be doing wrong here?

angular typescript angular9

Answer 1

Answer №1

There are a few issues that need to be addressed:

Initially, the ngOnInit function of the appcomponent will be called, triggering the execution of the getUIStrings function. This function returns a promise which takes approximately 5 minutes to resolve, and once resolved, it assigns the result to this.globals.UIStrings.
During this period when the promise is still unresolved, the DashboardComponent loads and as a result, this.dashboardMessage remains undefined because this.globals.UIStrings does not contain any data yet.
In the HTML code, using
```
{{globals.UIStrings["DashboardAdminDesc"]}}
```
will work eventually as the data will be available once the promise is resolved. The reference to this.globals in HTML means that any changes made to it from a service will reflect directly in the HTML where it's used, but not in the .ts file.

However, using {{this.dashboardMessege}} will always return undefined since the ngOnInit of the dashboard is executed before the promise is resolved.

Solution

I'm providing some suggestions without testing the code. Please adjust accordingly based on your requirements. I have not altered this.globals.UIStrings in the code snippet below.

NOTE: This solution is necessary due to the asynchronous nature of the app & dashboard components.

global.service

  response = new Subject<any>();  // consider response as your globals.UIStrings

async getUIStrings() {
    let url = "/datacontract/getuistrings";
    let promise = await this.http.get<APIResponse>(url).pipe(map(x => { return x.responsePayload })).toPromise<any>();
            
    this.response.next(promise.strings);                      // emitted data available here
}

Dashboard.component.ts

export class DashboardComponent {
    dashboardMessage: string;

    constructor(public globals: Globals) { 
              
               this.globals.response.subscribe(data=>{     // received data here

                  if (condition) {
                     this.dashboardMessage = data["DashboardAdminDesc"];
                  }
                  else {
                     this.dashboardMessage = data["DashboardDesc"];
                  }
                  
               })
     }
}

.html

{{dashboardMessge}} will consistently display desired result

Answer 2

There are a few issues that need to be addressed:

Initially, the ngOnInit function of the appcomponent will be called, triggering the execution of the getUIStrings function. This function returns a promise which takes approximately 5 minutes to resolve, and once resolved, it assigns the result to this.globals.UIStrings.
During this period when the promise is still unresolved, the DashboardComponent loads and as a result, this.dashboardMessage remains undefined because this.globals.UIStrings does not contain any data yet.
In the HTML code, using
```
{{globals.UIStrings["DashboardAdminDesc"]}}
```
will work eventually as the data will be available once the promise is resolved. The reference to this.globals in HTML means that any changes made to it from a service will reflect directly in the HTML where it's used, but not in the .ts file.

However, using {{this.dashboardMessege}} will always return undefined since the ngOnInit of the dashboard is executed before the promise is resolved.

Solution

I'm providing some suggestions without testing the code. Please adjust accordingly based on your requirements. I have not altered this.globals.UIStrings in the code snippet below.

NOTE: This solution is necessary due to the asynchronous nature of the app & dashboard components.

global.service

  response = new Subject<any>();  // consider response as your globals.UIStrings

async getUIStrings() {
    let url = "/datacontract/getuistrings";
    let promise = await this.http.get<APIResponse>(url).pipe(map(x => { return x.responsePayload })).toPromise<any>();
            
    this.response.next(promise.strings);                      // emitted data available here
}

Dashboard.component.ts

export class DashboardComponent {
    dashboardMessage: string;

    constructor(public globals: Globals) { 
              
               this.globals.response.subscribe(data=>{     // received data here

                  if (condition) {
                     this.dashboardMessage = data["DashboardAdminDesc"];
                  }
                  else {
                     this.dashboardMessage = data["DashboardDesc"];
                  }
                  
               })
     }
}

.html

{{dashboardMessge}} will consistently display desired result

Challenges with incorporating asynchronously fetched data in component operations

Answer №1

Solution

Similar questions

Helping React and MUI components become mobile responsive - Seeking guidance to make it happen

Stop Angular (click) binding from occurring when the variable is considered 'undefined'

Is it possible to create cloud functions for Firebase using both JavaScript and TypeScript?

Utilizing a single Angular 2 app to incorporate various components on a single page

Conceal the Froala editor when blur events occur

Show pictures stored in S3

Issue with deep linking functionality on S3 storage service turning out to be

How to activate form autofill in an Angular app

Schedule - the information list is not visible on the calendar

I'm having trouble importing sqlite3 and knex-js into my Electron React application

Utilizing i18next for both a custom Typescript library and a host simultaneously: a step-by-step guide

Issues have been encountered with Angular 5 when trying to make required form fields work properly

The Ionic framework is encountering difficulties in resolving all parameters for the service

Update dynamically generated CSS automatically

When attempting to assign a 'string' type to the @Input property, I am receiving an error stating that it is not assignable to the 'PostCard Layout' type

Firebase initialization unsuccessful due to incorrect directory placement

A guide on capturing the text content of the error message from the <mat-error> element with Protractor

Troubleshooting issues when integrating three.js GLTFLoader() with TypeScript due to conflicts with zimjs

Verify the ability to view a webpage

The parameter of type 'never' cannot be assigned with the argument of type 'number | boolean | undefined'