Angular2 ngIf-else

前端之家收集整理的这篇文章主要介绍了Angular2 ngIf-else前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想尝试加载pictureA或pictureB.
我的第一个解决方案是这样的:
<img *ngIf="my_picture" src="{{my_picture}}" width="180" height="80" >
 <img *ngIf="default_picture && !my_picture" src="{{default_picture}}">

但我想在API-Reference上使用if-else之类的:

<div *ngIf="condition; else elseBlock">...</div>
<ng-template #elseBlock>...</ng-template>

所以我这样做:

<div *ngIf="my_picture; else elseBlock">
     <img src="{{my_picture}}" >
 </div>
 <ng-template #elseBlock>
      <img src="{{default_picture}}" >
 </ng-template>

但我得到一个很大的异常堆栈:

06003

all directives are listed in the “@NgModule.declarations”. (”
–>

06004

我怎样才能重新简单的if-else块呢?

你应该使用ng-template
<ng-template #loading>Failed to do something wrong...</ng-template>
<div *ngIf="userObservable;else loading;">
  Aravind is here
</div>
   <button (click)="userObservable = !userObservable">Click to toggle</button>
</div>

LIVEDEMO

猜你在找的Angularjs相关文章