Angular2 ngif只顯示活動狀態數據

Question

我只想顯示活動插座。但通過這段代碼，我可以隱藏不活動的插座，但html元素仍然存在，並且會破壞設計。我也分享了輸出。這裏是我的代碼：

app.component.html

<div class="col-md-6 mb-5" *ngFor="let outlet of outletLists"> 
      <ng-template [ngIf]="outlet.outlet.status === 'active'"> 

      <div class="card card-xs"> 
       <div class="card-block"> 
        <div class="media"> 
         <div class="media-body"> 
          <p class="card-title">{{ outlet.outlet.outletName }} {{ outlet.outlet.status }}</p> 
          <p class="small text-muted">{{ outlet.outlet.location }}</p> 
         </div> 
        </div> 
       </div> 
      </div> 
      </ng-template> 
     </div> 

app.component.ts

this.http.get(this.api) 
    .map(res => res.json()) 
    .subscribe(data => { 
     this.outletLists = data; 
    }, error => { 
     console.log(error); 
    }); 

data.json

[{ 
    "mdrPercent": 21, 
    "index": 0, 
    "transaction": { 
    "status": "void", 
    "referenceId": "599515bc8a7b11232747bd95", 
    "customerName": "Darla Madden", 
    "cashier": "Melissa Blackwell", 
    "notes": "anim pariatur duis reprehenderit pariatur duis proident sunt dolore exercitation", 
    "outletName": "Rita Ellis", 
    "deviceId": "599515bc3bc0a8e9aa11f94f", 
    "time": "11:43:44", 
    "date": "2017-02-14", 
    "transactionId": "599515bc74bf959a928ba6dc", 
    "amountPaid": 90.010000000000005 
    }, 
    "mdrRebate": 334.88999999999999, 
    "nettAmount": 322.76999999999998, 
    "status": "void", 
    "deviceId": "599515bc58e46cca66c914be", 
    "mdrAmount": 356.44, 
    "time": "10:21:45", 
    "date": "2016-03-07", 
    "transactionId": "599515bc861d4362aadf7fd9", 
    "amountPaid": 90.019999999999996, 
    "transactionAmount": "1,938.75", 
    "isActive": false, 
    "outlet": { 
    "status": "active", 
    "outletName": "Olivia Griffin Sdn Bhd", 
    "image": "http://placehold.it/100x100", 
    "outletId": "599515bcb5ed64a61c137bbb", 
    "location": "Goodwin, Malaysia" 
    } 

}]

輸出：

Answer 1

試着改變你的模板下面使用ng-container到：

<ng-container *ngFor="let outlet of outletLists"> 
    <div class="col-md-6 mb-5" *ngIf="outlet.outlet.status === 'active'"> 
     <div class="card card-xs"> 
      <div class="card-block"> 
       <div class="media"> 
        <div class="media-body"> 
         <p class="card-title">{{ outlet.outlet.outletName }} {{ outlet.outlet.status }}</p> 
         <p class="small text-muted">{{ outlet.outlet.location }}</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</ng-container> 

Answer 2

你似乎看空集裝箱佔用的空間，因爲你的外div已經預留了空間而不檢查status的插座，因爲它有div,col-md-5類適用於它。

更改外ngFor div來使用ng-template代替div，給從內ng-if DIV（從ng-template變更）申請的對齊類將解決您的問題。

ngIf應作爲*ngIf（全部結構指令需要使用它們之前開始）

<ng-template ngFor let-outlet [ngForOf]="outletLists"> 
    <div class="col-md-6 mb-5" *ngIf="outlet.outlet.status === 'active'"> 
     <div class="card card-xs"> 
      <div class="card-block"> 
       <div class="media"> 
        <div class="media-body"> 
         <p class="card-title"> 
          {{ outlet.outlet.outletName }} {{ outlet.outlet.status }} 
         </p> 
         <p class="small text-muted"> 
          {{ outlet.outlet.location }} 
         </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</ng-template> 

Working Plunker

Answer 3

問題很簡單，有在最外的div爲每個出口創建的列，不管div是否沒有內容。一個簡單的解決方案可能是這樣的：

<div *ngFor="let outlet of outletLists"> 
    <div class="col-md-6 mb-5" *ngIf="outlet.outlet.status === 'active'"> 
    <div class="card card-xs"> 
     <div class="card-block"> 
     <div class="media"> 
      <div class="media-body"> 
      <p class="card-title">{{ outlet.outlet.outletName }} {{ outlet.outlet.status }}</p> 
      <p class="small text-muted">{{ outlet.outlet.location }}</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

所以現在它不會創建一個列，直到if條件滿足。