1

私は基本的に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)が呼び出されているときにエラーが発生することがわかりました。

4

2 に答える 2

6

注意喚起！NgbModal サービスには、ngbModalContainer ディレクティブを持つコンテナ要素が必要です。ngbModalContainer ディレクティブは、モーダルが開かれる DOM 内の場所をマークします。アプリケーションのルート要素の下に必ずどこかに追加してください。

ngbModalContainerこれは私が見逃していたもので、コード例にはテンプレートに含まれていません。

それを追加すると問題が解決し、モーダルがポップします!

それが誰かに役立つことを願っています:)

于 2016-09-04T10:18:21.547 に答える