Angular 5 - Angular 服务不以"模态"显示数据

Question

我正在使用一个组件和服务来处理应用程序中的模式。在download.compoment.ts中，我有一个打开模态窗口的方法。

下载.组件.ts

constructor(private modalService: ModalService) {}
public openModalProperty(id: string, nameFile: string) {
this.properties = [];
this.propertyService.byFile(+id).subscribe(
data => {
this.properties = data;
if (this.properties && this.properties.length > 0) {
this.titleFile = nameFile;
this.openModal("modal-download");
} else {
this.showErrorProperties(this.titleFile);
}
},
_ => {
this.processError();
}
);
}
public openModal(id: string) {
this.modalService.open(id);
}

properties是object的数组，其数据显示在模式窗口中。模板如下：

download.component.html

<app-modal id="modal-download" [title]="titleFile">
<div class="container" *ngFor="let property of properties">
<label>{{ property.name }}: &nbsp; </label><label> {{ property.value }} 
</label>
</div>
</app-modal>

在localhost中，它工作得很好，我点击button，它会显示带有相应数据的modal，但当我将其上传到生产时，模式窗口会打开，但属性排列的信息不会显示，或者只有当我按下键盘上的任何键或点击鼠标时，它才会加载信息。

会发生什么？

谢谢。

Answer 1

要确保检测不是问题，请在构造函数中将cdr作为ChangeDetectionRef添加为组件中的依赖项，然后在this.modalService.open(id);之后添加setTimeout(() => this.cdr.detectChanges())

出于教育原因，我将尝试解释。

您触发了模态服务并打开了模态。

模态正在打开，但它没有触发值的更改检测，因为值在创建模态实例之前已经更改。

这就是为什么左键或右键单击后，一切都很好。这是因为您通过点击来触发组件检查检测，并且通过触发的组件对所有子组件进行检测。

我在这里发表了我的评论，因为这似乎是正确的答案