Загрузка данных перед рендерингом компонента в Angular 7

Question

Я пытался восстановить данные из службы перед рендерингом моего компонента, но у меня есть эта ошибка: Ошибка типа: Невозможно прочитать свойство 'dataEntries' из неопределенного

Это мой код:

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
 }
]

Я также пытался использовать «разрешение», но это не помогло, любая помощь?

Answer 1

JS является асинхронным.Это означает, что он не будет ждать завершения любого запроса ввода-вывода и продолжит выполнение следующих строк кода.

В вашем случае getActivityInstance метод является асинхронным, поэтому JS не будет ждатьэто завершить, и он будет выполнять следующую строку.Следовательно,

editedInstance : this.dataInstance["dataEntries"]["demande"]["value"] выполняется до того, как сервис вернет данные (это время dataInstance будет undefined, если вы его не инициализировали).

Измените ваш код следующим образом:

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
 }
]
  });