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

您似乎看到空白容器占用空间，因为您的外部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 2

尝试使用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 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条件满足之前不会创建一个列。

Angular2 ngif仅显示活动状态数据

3 个答案: