引导模式在双击后打开，而不是在 Angular 4 中第一次单击时打开

Question

我正在开发一个电子商务应用程序，在这个我有购物车图标。我想做的是当我单击购物车图标时，我想显示一个包含用户选择的产品数据的模态屏幕。

但是在我的情况下，页面加载模态屏幕后第一次双击后打开，之后它通过单击打开。

图标：

<i class="fas fa-cart-plus fa-flip-horizontal text-primary" (click)="get_My_Cart($event)" data-toggle="modal" data-target="#exampleModal" style="font-size:25px;cursor: pointer;"></i>

模 态：

<div *ngIf="mycart && mycart.length" class="modal fade modalstyle" 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 headerHeight text-white " style="background:rgb(0, 0, 0);font-weight:bold">
<h6 class="modal-title" id="exampleModalLabel">My Cart Items</h6>
<button #closeModalBtn type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div *ngFor="let products of mycart;let i =index;">
<div class="container col-sm-12">
<div class="row">
<div class="col-sm-4 paddingforimage">
<img [src]="products['ITEM_IMAGE_PATH']">
</div>
<div class="text-info col-sm-6">
<span>
<h6>{{products?.TOTAL_QTY}} &times; {{products?.ITEM_PRICE}} &#8377;</h6>
</span>
<span>
<h6>{{products?.ITEM_DESC}}</h6>
</span>
<span>
<h6>{{products?.TOTAL_AMT}} &#8377;</h6>
</span>
</div>
<div class="col-sm-1 text-right">
<button type="button" class="close closebtn" aria-label="Close" (click)="detele_My_Cart(products?.ITEM_CODE)">
<span aria-hidden="true" (click)="detele_My_Cart(products?.ITEM_CODE)">&times;</span>
</button>
</div>
</div>
</div>
<hr>
</div>
<div class=" container row col-sm-12">
<div class="col-sm-6">
<strong>SHIPPING</strong>
</div>
<div class="col-sm-6 text-right">0 &#8377;</div>
<hr>
<div class="col-sm-6">
<strong>TOTAL</strong>
</div>
<div class="col-sm-6 text-right">{{my_Cart_Total_Amount}} &#8377;</div>
</div>
<br>
<div class="container row col-sm-12" id="wrapper">
<button type="button" class="btn btn-success buttonSize" data-dismiss="modal" routerLink="/cartsummary">
<strong>CHECK OUT</strong>
</button>
</div>
</div>
</div>
</div>
</div>

元件：

get_My_Cart($event) {
this.publicIp.v4().then(ip => {
this.CartdataService.get_My_Cart_Products(ip).subscribe(
data => {
this.mycart = data['Table']
this.my_Cart_Total_Amount = data['Table1'][0]['TOTAL_AMOUNT']
});
});
}

在模态屏幕中我有一个验证，如果数据绑定在其中，模态屏幕是打开的，否则它不会.(如果购物车为空，则模式不会打开(。

*ngIf="mycart && mycart.length"

如果我从模态屏幕中删除此验证，它可以工作，但它总是打开(如果购物车中没有产品并且用户单击购物车图标，它会打开，但我想限制它。

谁能告诉我如何处理这个问题..

Answer 1

代码流不正确。

无论如何，我认为，您正在使用jQuery和Bootstrap.js。(坏主意(

数据来自服务器后，可以通过编程方式触发模式using $('#exampleModal').modal('show')。

declare var $ :any;
get_My_Cart($event) {
this.publicIp.v4().then(ip => {
this.CartdataService.get_My_Cart_Products(ip).subscribe(
data => {
this.mycart = data['Table']
this.my_Cart_Total_Amount = data['Table1'][0]['TOTAL_AMOUNT']
if(this.mycart && this.mycart.length)
$('#exampleModal').modal('show')
});
});
}

---

但是在这种情况下有一个简单的解决方法。尝试切换 CSSdisplay属性，而不是使用*ngIf将其从 DOM 中删除。

<div [ngStyle]="{display: mycart && mycart.length ? 'block':'none'}" class="modal fade modalstyle">
</div>