无法打开最简单的模态

Question

我基本上从ng-bootstrap Modal Documentaion复制了Modal示例,似乎我无法打开它.

只要我点击按钮打开Modal,Chrome的控制台就会大喊:

Uncaught TypeError: Cannot set property stack of [object Object] which has only a getter

提前致谢!

编辑:

这是我的模态组件代码:

import {Component} from '@angular/core';

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'add-transaction',
    templateUrl: './app/components/add-transaction/AddTransaction.html'
})
export class AddTransaction {
    closeResult: string;

    constructor(private modalService: NgbModal) {}

    open(content) {
        this.modalService.open(content).result.then((result) => {
            this.closeResult = `Closed with: ${result}`;
        }, (reason) => {
            this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        });
    }

    private getDismissReason(reason: any): string {
        if (reason === ModalDismissReasons.ESC) {
            return 'by pressing ESC';
        } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
            return 'by clicking on a backdrop';
        } else {
            return  `with: ${reason}`;
        }
    }
}

模态HTML:

<template #content let-c="close" let-d="dismiss">
    <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
        <p>One fine body&hellip;</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
    </div>
</template>

<button class="btn btn-success" (click)="open(content)">New Transaction</button>

<pre>{{closeResult}}</pre>

这个Modal组件正被另一个组件使用,其中包含<th>:

<th><add-transaction></add-transaction></th>

更新:

值得注意的是,在调试时,我可以看到在调用open方法时弹出错误this.modalService.open(content)

Answer 1

当心!NgbModal服务需要一个带有ngbModalContainer指令的容器元素.ngbModalContainer指令标记DOM中打开模态的位置.请务必在应用程序根元素下添加某个位置.

这就是我所缺少的,代码示例不包含ngbModalContainer模板上的内容.

添加它解决了我的问题,现在Modal弹出!

希望它对某人有帮助:)