在Angular 7中渲染组件之前先加载数据

时间:2019-03-19 10:50:54

标签: angular typescript angular7

在渲染组件之前,我试图从服务中恢复数据,但出现此错误:TypeError:无法读取未定义的属性'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
 }
]

我也尝试使用'resolve',但是它不起作用,有帮助吗?

1 个答案:

答案 0 :(得分:1)

  

JS是异步的。这意味着它不会等待任何I / O请求   完成并继续执行下一行代码。

在您的情况下,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
 }
]
  });