Question

这里我有两个容器，第一个容器假设是显示json中是否存在值，第二个show是json中的值为空。这是我的代码：

App.component.html

<button id="generate-btn">Amazing Fact Button</button>
<img id="image"></img>

data.json

<!-- show this container if value is exist -->
    <ng-container *ngIf="outletName">
  <div class="media media-xs align-items-center mb-5">
    <div class="media-right float-right">
      <a class="drop-assigned-outlet" href="#"><i class="fa fa-trash-o"></i></a>
    </div>
    <button class="btn btn-primary-ln" *ngIf="outletName">Change assigned outlet</button>x
  </div>
</ng-container>

<!-- show this container if value is empty -->
<ng-container *ngIf="outletName == ''">
  <div class="media media-xs align-items-center mb-5">
    <p>No outlet have assigned</p>
  </div>
  <button class="btn btn-primary-ln">Assign an outlet</button>
</ng-container>

app.component.ts

[
  {
    "staffId": "59998eeadfb23a8c0bba5769",
    "staffName": "Sutton Fitzpatrick",
    "outletName": "Marjorie Fitzgerald",
    "outletId": "59998eeaf84372166a233235",
    "outletLocation": "mid valley, kl",
    "designation": "Outlet Supervisor",
    "image": "http://placehold.it/100x100",
    "activeSince": "2015-06-27T09:29:23 -08:00",
    "deactivatedSince": "2015-12-07T12:05:04 -08:00",
    "status": "active",
    "email": "samuelkavin@yahoo.com",
    "contact": 60124174701,
    "devices": [
      {
        "posName": "Outlet1_DEVICE00001",
        "deviceId": "59998eea245ec74623bfb06c",
        "lastActive": "04:50:34"
      }
    ]
  }
]

Answer 1

将第一个更改为

<ng-container *ngIf="outletName !== ''">

Answer 2

在这里，你有完美的＆＃39;有机会使用 ng-templates ：

 <div *ngIf="outletName; else templateForEmpty">
          <div class="media media-xs align-items-center mb-5">
              <div class="media-right float-right">
                 <a class="drop-assigned-outlet" href="#"><i class="fa fa-trash-o"></i></a>
              </div>
             <button class="btn btn-primary-ln" *ngIf="outletName">Change assigned outlet</button>x
           </div>
           <ng-template #templateForEmpty>
              <div class="media media-xs align-items-center mb-5">
                 <p>No outlet have assigned</p>
              </div>
              <button class="btn btn-primary-ln">Assign an outlet</button>
           </ng-template>
   </div>

angular2 - 如果值为空则显示隐藏

2 个答案: