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

Question

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

的方法

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的数组，其数据以模态window显示。模板如下：

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 和相应的数据，但是当我将其上传到生产模式时 window 打开，但是属性排列的信息不显示，或者只有当我按下键盘上的任意键或单击鼠标时才会加载信息。

会发生什么？

谢谢。

Answer 1

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

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

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

模态正在打开，但它没有触发值的变化检测，因为在创建模态实例之前值发生了变化。

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

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

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

Angular 5 - Angular service doesn't show data in the `Modal`

modal-dialog

angular-services

angular