Angular 尝试关闭时出现NgbModal错误
我已经成功地将NgbModal集成到Angular 2应用程序中,目前在该模式中显示了另一个组件 我遇到的问题是,一旦它出现,我单击“关闭”,我会收到以下错误消息:Angular 尝试关闭时出现NgbModal错误,angular,bootstrap-modal,ng-bootstrap,Angular,Bootstrap Modal,Ng Bootstrap,我已经成功地将NgbModal集成到Angular 2应用程序中,目前在该模式中显示了另一个组件 我遇到的问题是,一旦它出现,我单击“关闭”,我会收到以下错误消息: Cannot read property 'close' of undefined 现在我一直在关注HTML,也浏览了Typescript,但是我不确定我到底缺少了什么 这是我的类型脚本文件: import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
Cannot read property 'close' of undefined
现在我一直在关注HTML,也浏览了Typescript,但是我不确定我到底缺少了什么
这是我的类型脚本文件:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { BugService } from '../service/bug.service';
import { Bug } from '../model/bug';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { BugDetailComponent } from '../../bug-detail/bug-detail.component';
@Component({
selector: 'bug-list',
templateUrl: './bug-list.component.html',
styleUrls: ['./bug-list.component.css']
})
export class BugListComponent implements OnInit {
private bugs: Bug[] = [];
constructor(private bugService: BugService, private cdRef: ChangeDetectorRef, private modalService: NgbModal) { }
ngOnInit() {
this.getAddedBugs();
}
getAddedBugs() {
this.bugService.getAddedBugs().subscribe(bug => {
this.bugs.push(bug);
this.cdRef.detectChanges();
},
err => {
console.error("unable to get added bug - ", err);
});
}
open() {
const modalRef = this.modalService.open(BugDetailComponent);
modalRef.componentInstance.name = 'World';
}
}
我导入BugDetailComponent
,然后在open()
函数中引用它。当我在模式出现后单击close时,我会看到错误消息
我的HTML如下所示:
<div class="modal-header" [id]="modalId">
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Hi there!</h4>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
</div>
&时代;
你好!
你好,{{name}}
接近
有人能告诉我为什么我会收到这个错误,也许能帮我修复它吗 请忽略,我已解决此问题。在
bug detail.component.ts中缺少以下构造函数
constructor(public activeModal: NgbActiveModal) {}
在模块的providers[NgbActiveModal]中添加NgbActiveModal。它将在模块的所有组件中可用,然后在组件类构造函数的构造函数中声明其变量(私有ngvActiveModal:NgbActiveModal) 如果行中缺少导入“NgbModal”,您可能会遇到相同的错误
从'@ng bootstrap/ng bootstrap'导入{NgbModal,NgbActiveModal}代码>如果有人有相同的问题(我尝试了CodeRatchet的解决方案,但遇到了与Adrita Sharma相同的问题)
通过在模板中使用modalRef.close(),我可以使用close
和discover
例如:
<button type="button" class="btn btn-secondary" (click)="modalRef.close('Close click')">Close</button>
关闭
我收到一个错误:错误:没有NGBActiveModel的提供程序代码>任何帮助??向app.module.ts中的提供程序添加NgbaTiveModel这是不真实的
<button type="button" class="btn btn-secondary" (click)="modalRef.close('Close click')">Close</button>