我基本上从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">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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)