我正在尝试根据 youtube 上的教程创建一个 Angular 应用程序，我使用 Bootstrap 模式。单击后“添加部门”按钮不起作用

Question

<button type="button" class="btn btn-primary  float-right  m-2" data-toggle="modal" data-target= "#exampleModal" (click)= "addClick()" data-backdrop="static" data-keyboard="false">Add Department
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel"> {{ModalTitle}} </h5>
            <button type="button" class="close"
           data-dismiss="modal" aria-label="Close"
           (click)=  "closeClick()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <app-add-edit-dep   [dep]= "dep"   *ngIf= "ActivateAddEditDepComp"></app-add-edit-dep>
        </div>
    </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 中，就像它是一个组件一样，或者您可以在 name.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