模态不反映绑定？

Question

我使用 ngx-bootstrap 在我的 Angular4 应用程序中打开一个模式：http://valor-software.com/ngx-bootstrap/#/modals#service-component

问题是模型没有反映模态视图。对象已更新，但未反映在视图中。以下是重要的部分：

showFromComponent(modalComponent: any, model?: any): void {
    let modal = this.modalService.show(modalComponent);

    if (model) {
        let component = <BaseModalComponent>modal.content;

        component.model = model;
        component.afterModelLoad();
    }
}

BaseModalComponent:

import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';

export abstract class BaseModalComponent {
    model: any = {};

    protected constructor(
        public bsModalRef: BsModalRef
    ) { }

    public abstract afterModelLoad(): void;
}

ModalComponent:

import { Component, OnInit } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
import { BaseModalComponent } from '../../../app.core/abstractions/base-modal.component';

@Component({
    selector: 'visit-detail-modal',
    templateUrl: './visit-detail-modal.component.html',
    styleUrls: ['./visit-detail-modal.component.css']
})
export class VisitDetailModalComponent extends BaseModalComponent implements OnInit {
    description: string = '';

    constructor(
        public bsModalRef: BsModalRef
    ) {
        super(bsModalRef);
    }

    ngOnInit(): void {
    }

    afterModelLoad(): void {
        this.description = this.model.title;
    }
}

最后是视图：

<div class="modal-body">
    {{description}}
</div>

说明始终为空白。如果我在 afterModelLoad 中添加调试器，则会设置 description，但不会更新视图。

有什么想法吗？

Answer 1

在你的组件中注入私有 cd: ChangeDetectorRef 和运行 detectChanges 在你的 afterModelLoad 方法的最后：

afterModelLoad(): void {
    this.description = this.model.title;
    this.cd.detectChanges();
}

但是，显示方法 BsModalService 提供了一种传递数据以初始化组件的方法会更好。此处报告了一些相同的 issue/feature-request：https://github.com/valor-software/ngx-bootstrap/issues/2251。在 ng-bootstrap 上也进行了类似的讨论： https://github.com/ng-bootstrap/ng-bootstrap/issues/861

模态不反映绑定？

Modal not reflecting bindings?

ngx-bootstrap

angular