Angular2 ngif 仅显示事件状态数据

Question

我只想显示事件的 socket 。但通过这段代码，我可以隐藏不活动的 socket ，但 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

您似乎看到空白容器占用空间，因为您的外部 div 已经保留了一个空间，而没有检查 socket 的 status，因为它有 div应用了 col-md-5 类。

更改外部 ngFor div 以使用 ng-template 而不是 div 并应用内部 ng- 中的对齐类if div(change it from 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