Angular2 ngIf-else

发布时间：2020-12-17 08:51:04 所属栏目：安全来源：网络整理

导读：我想尝试加载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之类的： d

我想尝试加载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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!