Angular 如果角度条件为真,则显示模态?
我只想在成功生成票据后显示模式。 当用户单击按钮“mybutton”时,只有在没有错误的情况下才会打开模式 票证.组件.tsAngular 如果角度条件为真,则显示模态?,angular,bootstrap-modal,Angular,Bootstrap Modal,我只想在成功生成票据后显示模式。 当用户单击按钮“mybutton”时,只有在没有错误的情况下才会打开模式 票证.组件.ts constructor(private _service: TicketService, private _idservice: SharedService) { } generateTicket(){ this._idservice.currentMessage.subscribe(message => this.userId = message)
constructor(private _service: TicketService, private _idservice: SharedService) {
}
generateTicket(){
this._idservice.currentMessage.subscribe(message => this.userId = message)
this._service.createTicketFromRemote(this.ticket, this.userId).subscribe(
data => {
console.log("response recieved");
this.msg = "Ticket Successfully Generated";
// code to display modal
},
error => {
this.open_Modal = false;
console.log("exception occured");
console.log(error);
// do nothing
}
)
}
ticket.component.html
<button name="myButton" (click)="generateTicket()" class="btn btn-primary">Generate Ticket</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="text-center">Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning">Print</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal" >Edit</button>
</div>
</div>
</div>
</div>
生成票证
情态标题
&时代;
模态体
接近
印刷品
编辑
您可以使用一个简单的ngIf
来实现这一点:
generateTicket(){
this._idservice.currentMessage.subscribe(message => this.userId = message)
this._service.createTicketFromRemote(this.ticket, this.userId).subscribe(
data => {
console.log("response recieved");
this.msg = "Ticket Successfully Generated";
this.open_Modal = true; // <------
},
error => {
this.open_Modal = false;
console.log("exception occured");
console.log(error);
// do nothing
}
)
}
您可以使用一个简单的
ngIf
来实现这一点:
generateTicket(){
this._idservice.currentMessage.subscribe(message => this.userId = message)
this._service.createTicketFromRemote(this.ticket, this.userId).subscribe(
data => {
console.log("response recieved");
this.msg = "Ticket Successfully Generated";
this.open_Modal = true; // <------
},
error => {
this.open_Modal = false;
console.log("exception occured");
console.log(error);
// do nothing
}
)
}
类model具有css属性dispaly:none,因此您必须添加dispaly:block属性来显示该模式
closeModal() {
this.openModal = false;
}
Html
AddngClass指令有条件地添加或删除showModal css类
div class="modal fade" [ngClass]="{'showModal': openModal}" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
.......
</div>
css
类model具有css属性dispaly:none,因此您必须添加dispaly:block属性来显示该模式
closeModal() {
this.openModal = false;
}
Html
AddngClass指令有条件地添加或删除showModal css类
div class="modal fade" [ngClass]="{'showModal': openModal}" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
.......
</div>
css
您可以简单地使用这一行从.ts文件中打开模式
$('#exampleModalLong').modal('show');
另外,不要忘记声明美元符号“$”,在导入.ts文件后使用此行
declare var $: any;
您可以简单地使用这一行从.ts文件中打开模式
$('#exampleModalLong').modal('show');
另外,不要忘记声明美元符号“$”,在导入.ts文件后使用此行
declare var $: any;
不,我认为我在代码中做了一些错误的事情。我将尝试调试我的代码。不,我认为我在代码中做了一些错误的事情。我会试着调试我的代码。@DishaHedge谢谢你的解决方案,但是你能告诉我为什么上面两个解决方案不起作用吗?我的解决方案有效,Jacopo Sciampi one不是因为模态css类。在angular2+中使用jquery不是最佳实践。在某些情况下是错误的@DishaHedge谢谢你的解决方案,但是你能告诉我为什么上面两个解决方案不起作用吗?我的解决方案起作用了,Jacopo Sciampi one不是因为模态css类。在angular2+中使用jquery不是最佳实践。在某些情况下是错误的!