代码之家 › 专栏 › 技术社区 › Nikson

启动模式在双击后打开,而不是在角4中的第一次单击时打开

bootstrap-4 typescript angular html

Nikson · 技术社区 · 6 年前

我在一个电子商务应用程序中工作,在这里我有购物车图标。我想做的是当我点击购物车图标,我想显示一个模式屏幕与用户选择的产品数据。

但在我的例子中,第一次在页面加载之后,模式屏幕在双击之后打开,然后它在单击之后打开。

偶像:

<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"

如果我将此验证从模式屏幕中删除,它将正常工作,但始终打开(如果购物车中没有产品,并且用户单击了购物车图标,它将打开,但我要限制它)。

有人能告诉我怎么处理这个问题吗..

1 回复 | 直到 6 年前

Ritwick Dey 6 年前

代码流不正确。

不管怎样,我想,你在用 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')
            });
    });
}

但在这种情况下有一个简单的解决方法。尝试切换 display 属性,而不是使用 *ngIf .

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

</div>