我只想显示有效的插座。但是使用此代码,我可以隐藏不 Activity 的出口,但是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"
  }

}]

输出:
angular - Angular2 ngif仅显示事件状态数据-LMLPHP

最佳答案

尝试使用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>

10-05 22:33
查看更多