1

我使用以下方法在 Angular4 应用程序中打开一个模式：http ngx-bootstrap: //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，但它不会更新视图。

有任何想法吗？

4

1 回答 1

1

在您的组件中注入私有 cd: ChangeDetectorRef 并在您的 afterModelLoad 方法结束时运行 detectChanges：

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

但是如果显示方法 BsModalService 提供了一种传递数据来初始化组件的方法，那就更好了。这里报告了一些相同的问题/功能请求：https ://github.com/valor-software/ngx-bootstrap/issues/2251 。在 ng-bootstrap 也进行了关于类似事情的讨论： https ://github.com/ng-bootstrap/ng-bootstrap/issues/861

于 2017-07-27T07:47:12.603 回答