javascript - 打不开最简单的Modal

Question

我基本上从 ng-bootstrap Modal Documentaion 复制了模态示例而且我好像无法打开它。

我一点击按钮打开模态框，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

Heads up! The NgbModal service needs a container element with the ngbModalContainer directive. The ngbModalContainer directive marks the place in the DOM where modals are opened. Be sure to add somewhere under your application root element.

这就是我所缺少的，代码示例不包含模板上的 ngbModalContainer。

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

希望对大家有帮助:)