Angular2 ngIf-else - angulaire, si-déclaration

J'essaie de charger pictureA ou pictureB. Ma première solution est la suivante:

 <img *ngIf="my_picture" src="/images/{{my_picture}}" width="180" height="80" >
<img *ngIf="default_picture && !my_picture" src="{{default_picture}}">

Mais je voudrais utiliser if-else like sur API-Reference:

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

Alors je le fais comme ça:

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

Mais je reçois un gros stack d'exception:

zone.js:388 Unhandled Promise rejection: Template parse errors:
Can"t bind to "ngIfElse" since it isn"t a known property of "div". ("
-->

<div [ERROR ->]*ngIf="my_picture; else elseBlock">
<img src="/images/{{my_picture}}"): UserComponent@15:13
Property binding ngIfElse not used by any directive on an embedded template. Make sure that the property name is spelled correctly and

toutes les directives sont listées dans "@ NgModule.declarations". (" ->

        [ERROR ->]<div *ngIf="my_picture; else elseBlock">
<img src="/images/{{my_picture}}" width="180" height="8"): UserComponent@15:8
"ng-template" is not a known element

Comment puis-je relier un simple bloc si-sinon?

Réponses:

10 pour la réponse № 1

Vous devriez utiliser 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

---

7 pour la réponse № 2

La syntaxe ngIf / Else n'est pas disponible dans angular 2 mais est disponible dans angular 4

Pour angular 2, vous devez utiliser ngIf deux fois et la seconde fois, vous annulez la valeur comparée (n'utilisez pas le! =, Mais utilisez l'esperluette avec la valeur).

<div class="text-center" *ngIf="userName"> Hello {{userName}}, how are you </div>
<div class="text-center" *ngIf="userName == """> Hello, please login to access the app</div>

À partir de 4 angulaires

<div *ngIf="userName; else showLoginRequestMessage">
Hello {{userName}}, how are you
</div>
<ng-template #showLoginRequestMessage>
<div class="text-center"> Hello, please login to access the app</div>
</ng-template>

---

2 pour la réponse № 3

**example 1 ngIf**

<div *ngIf="condition">..</div>
<div template="ngIf condition">..</div>

**example 1.i ngIf**
<ng-template [ngIf]="condition"><div>..</div></ng-template>

**example 2 else block**

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

**example 3 then and else block**

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

---