Load data before rendering component in Angular 7

Question

I tried to recuperate data from service before rendering my component but i have this error: TypeError: Cannot read property 'dataEntries' of undefined

this is my code:

ngOnInit() {
 this.route.params.subscribe((params:Params)=>{
  this.ActivityId=params['id']
 })
 this.activityInstanceIdentifier= {
  "class":"eu.w4.engine.client.bpmn.w4.runtime.ActivityInstanceIdentifier",
  "id":this.ActivityId
 }
 this.activityInstanceAttachement= {
  "class":"eu.w4.engine.client.bpmn.w4.runtime.ActivityInstanceAttachment",
  "dataEntriesAttached":true
 }
this.activityService.getActivityInstance(this.sessionService.getPrincipal(),
                                         this.activityInstanceIdentifier,
                                         this.activityInstanceAttachement)
                                        .subscribe((ActivityInstance)=>{
                                          this.dataInstance=ActivityInstance                                 
                                        });
 }

forms = [
 {
  dataEditionMode:DataEditionMode.DISPLAY,
  name:"demande",
  editedInstance:this.dataInstance["dataEntries"]["demande"]["value"],
  component:DemandeFormComponent,
  multiple:false
 }
]

I tried to use 'resolve' also but it doesn't work , any help ?

Async issue : you should move your forms definition inside your subscribe callback. — user4676340
– user4676340, Commented Mar 19, 2019 at 10:57
If you need to retrieve data from a service before the component is loaded you can use a resolver, it loads data from your service before the component is rendered — Simo
– Simo, Commented Mar 19, 2019 at 11:11

programoholic · Accepted Answer · 2019-03-19 11:01:20Z

JS is Asynchronous. Which means it won't wait for any I/O request to get complete and will keep executing next lines of code.

In you case getActivityInstance method is asynchronous hence JS won't wait for it to get complete and it will execute the next line . Hence

editedInstance : this.dataInstance["dataEntries"]["demande"]["value"] gets executed before service returns the data (that time dataInstance will be undefined if you haven't initialized it) .

Modify your code like this :

this.activityService.getActivityInstance(this.sessionService.getPrincipal(),
                                         this.activityInstanceIdentifier,
                                         this.activityInstanceAttachement)
                                        .subscribe((ActivityInstance)=>{
                                          this.dataInstance=ActivityInstance;

 forms = [
 {
  dataEditionMode:DataEditionMode.DISPLAY,
  name:"demande",
  editedInstance:this.dataInstance["dataEntries"]["demande"]["value"],
  component:DemandeFormComponent,
  multiple:false
 }
]
  });

Collectives™ on Stack Overflow

Load data before rendering component in Angular 7

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related