我试图从youtube上的教程创建一个Angular应用程序，我使用Bootstrap模式.单击"添加部门&q

Question

<按钮类型＝"；按钮"；class＝"；btn-btn主浮动右m-2"；数据切换＝"；模态"；数据目标＝"#exampleModal"；(点击(="；addClick(("数据背景＝"；静态"；数据键盘＝"；false">添加部门在此处输入代码｛｛ModalTitle｝｝<按钮类型＝"；按钮"；class＝"；关闭"；数据消除="；模态"；aria标签＝"；关闭"；(点击(="；closeClick(("gt；×<应用程序添加编辑dep[dep]＝"；dep"*ngIf＝"；ActivateAddEditDepComp">

</div>
</div>
</div>

<table class="table table-striped">
<thead>
<tr>
<th>DepartmentId</th>
<th>Department Name</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let dataItem of DepartmentList">
<td>{{dataItem.DepartmentId}}</td>
<td>{{dataItem.DepartmentName}}</td>
<td>
<button type="button" class="btn btn-light mr-1">
Edit
</button>
<button type="button" class="btn btn-light mr-1">
Delete
</button>
</td>
</tr>
</tbody>
</table>

Answer 1

您必须定义您的模态。你可以把它添加到你的html中，就好像它是一个组件一样，也可以在你的名称.component.ts.中激活它

第一个示例(从未使用(

<modal-component #example-modal></modal-component>

第二个例子(我一直用这个(

HTML

<button type="button" class="your class" (click)="this.openModal($event)"></button>

TS

openModal($event) {
const modalRef = this.modalService.open(ModalComponent, {
scrollable: false,
size: 'lg', 
windowClass: 'your-custom-class',
centered: false,
backdrop: 'static',
});

文档-->https://ng-bootstrap.github.io/#/components/modal/examples