如何使用 ng2-bootstrap 获取弹出窗口 window?
How to get popup window using ng2-bootstrap?
<section class="main">
<h1>Company Management</h1>
<md-card>
<button class="md-fab md-mini add-task" md-mini-fab title="Add" (click)="addCompany.show()">
<md-icon style="color:white;">add</md-icon>
</button>
<div class="table-responsive">
<table class="table adminTable">
<thead>
<th>Name</th>
<th>Email</th>
<th>country</th>
<th>Action</th>
</thead>
<tbody>
<tr *ngFor="let company of companies">
<td>{{company.user_name}}</td>
<td>{{company.email}}</td>
<td>{{company.country}}</td>
<td>
<button class="btn" md-raised-button>Guide</button>
<button class="btn" md-raised-button>Pin</button>
<button class="iconBtn first">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button class="iconBtn second">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</md-card>
</section>
<div bsModal #addCompany="bs-modal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-body">
</div>
<div class="modal-footer cat-btn">
<button md-raised-button class="md-raised cancel color-white" (click)="addCompany.hide()">Cancel
</button>
<button md-raised-button class="md-raised save color-white">Save</button>
</div>
</div>
</div>
</div>
这是我的 html 代码,其中我将 ngmodal 用于弹出 window 但我没有得到任何类型的弹出模型。
我已经从 'ng2-bootstrap' 导入了 import { ModalModule };在 app.module.ts 文件中
你能帮我解决这个问题吗
您的代码 100% 没问题,模板方面没有问题。
但可能的问题可能是:
1) 仅导入 ModalModule
而不是 ModalModule.forRoot()
import { ModalModule } from 'ngx-bootstrap';
@NgModule({
imports: [ ... , ModalModule.forRoot() ],
...
})
2) 忘记添加 css
这是静态模式的工作示例,您可以将您的代码与此进行比较:
<section class="main">
<h1>Company Management</h1>
<md-card>
<button class="md-fab md-mini add-task" md-mini-fab title="Add" (click)="addCompany.show()">
<md-icon style="color:white;">add</md-icon>
</button>
<div class="table-responsive">
<table class="table adminTable">
<thead>
<th>Name</th>
<th>Email</th>
<th>country</th>
<th>Action</th>
</thead>
<tbody>
<tr *ngFor="let company of companies">
<td>{{company.user_name}}</td>
<td>{{company.email}}</td>
<td>{{company.country}}</td>
<td>
<button class="btn" md-raised-button>Guide</button>
<button class="btn" md-raised-button>Pin</button>
<button class="iconBtn first">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button class="iconBtn second">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</md-card>
</section>
<div bsModal #addCompany="bs-modal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-body">
</div>
<div class="modal-footer cat-btn">
<button md-raised-button class="md-raised cancel color-white" (click)="addCompany.hide()">Cancel
</button>
<button md-raised-button class="md-raised save color-white">Save</button>
</div>
</div>
</div>
</div>
这是我的 html 代码,其中我将 ngmodal 用于弹出 window 但我没有得到任何类型的弹出模型。 我已经从 'ng2-bootstrap' 导入了 import { ModalModule };在 app.module.ts 文件中 你能帮我解决这个问题吗
您的代码 100% 没问题,模板方面没有问题。
但可能的问题可能是:
1) 仅导入 ModalModule
而不是 ModalModule.forRoot()
import { ModalModule } from 'ngx-bootstrap';
@NgModule({
imports: [ ... , ModalModule.forRoot() ],
...
})
2) 忘记添加 css
这是静态模式的工作示例,您可以将您的代码与此进行比较: