Angular 5-Angular服务不在Modal中显示数据

如何解决Angular 5-Angular服务不在Modal中显示数据

我正在使用组件和服务在我的应用程序中使用模式。在download.compoment.ts中，有一种方法可以打开模式窗口。

download.component.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和相应的数据，但是当我将其上传到生产环境时，模态窗口打开，但是仅当我按下键盘上的任意键或单击鼠标时，才会显示属性安排的信息。

会发生什么？

谢谢。

解决方法

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

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

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

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

这就是在单击鼠标左键或右键后一切正常的原因。这是因为您通过单击鼠标来触发组件检查检测，并且触发的组件对所有子组件进行检测。

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