如果条件在Angular?中为true，则显示模态

Question

我只想在成功生成票证后显示模态。当用户单击按钮"mybutton"时，只有在没有错误的情况下，它才会打开模态。

票据组件.ts

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">&times;</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>

Answer 1

您可以简单地使用此行从.ts文件打开模态

$('#exampleModalLong').modal('show');

另外，不要忘记申报美元符号"$"，在.ts文件中的进口后使用这一行

declare var $: any;

Answer 2

类modal具有css属性dispaly:none，因此必须添加dispaly:block属性才能显示modal。

Html

添加ngClass指令以有条件地添加或删除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>

在ts.中

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.openModal = true; // <------ Like Jacopo Sciampi said
},

用于关闭模态。

closeModal() {
this.openModal = false;
}

css

.showModal {
display:block;
}

Answer 3

您可以使用一个简单的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
}
)
}

在html中，将ngIf添加到主模态div:中

<div *ngIf="open_Modal" 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">&times;</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将主div包装到ng-container中，而不是在div中，以使代码更加干净：

<ng-container *ngIf="open_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">&times;</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>
</ng-container>