如果Angular 4中没有内容，如何隐藏引导模式

Question

我正在使用 Angular 4 电子商务应用程序，在此我需要在购物车中没有产品时隐藏引导模式。

当用户选择了一些添加到 mycart 模态屏幕的产品时。用户可以从 mycart 中删除产品。

在这种情况下，我想这样做，当 mycart 中没有产品时，如果用户单击 mycart 图标它不应该打开模式。

目前它打开一个空的模态屏幕。

appComponent.html

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

图标

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

Answer 1

简单，使用*ngIf 指令？当mycart && mycart.length 为真时显示模态

例如

<div *ngIf="mycart && mycart.length" class="modal fade modalstyle">
  ....
  ....
<div>

---

编辑：修复边缘情况，以编程方式触发close 按钮

在模板中添加#closeModalBtn

<button #closeModalBtn type="button" class="close" data-dismiss="modal">
    ...
 </button>   

在component.ts中，以编程方式触发close按钮

@ViewChild('closeModalBtn') closeModalBtn:ElementRef;
 
closeModalIfNoCart() {
  if (!this.mycart || !this.mycart.length)
     this.closeModalBtn.nativeElement.click();
}

detele_My_Cart(id) {
   // todo to remove
   //...
   closeModalIfNoCart();
}