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

【问题标题】：Load data before rendering component in Angular 7在 Angular 7 中渲染组件之前加载数据
【发布时间】：2019-08-09 20:59:54
【问题描述】：

我尝试在渲染组件之前从服务中恢复数据，但出现此错误：TypeError: Cannot read property 'dataEntries' of undefined

这是我的代码：

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

我也尝试使用“解决”，但它不起作用，有什么帮助吗？

【问题讨论】：

异步问题：您应该在订阅回调中移动表单定义。
如果您需要在加载组件之前从服务中检索数据，您可以使用resolver，它会在组件渲染之前从您的服务中加载数据

标签： angular typescript angular7

【解决方案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
 }
]
  });

【讨论】：