Estoy tratando de cargar pictureA o pictureB Mi primera solución es así:
<img *ngIf="my_picture" src="{{my_picture}}" width="180" height="80" > <img *ngIf="default_picture && !my_picture" src="{{default_picture}}"> Pero me gustaría usar if - else like en API Reference:
<div *ngIf="condition; else elseBlock">...</div> <ng-template #elseBlock>...</ng-template>Entonces, estoy tratando de hacerlo así:
<div *ngIf="my_picture; else elseBlock"> <img src="{{my_picture}}" > </div> <ng-template #elseBlock> <img src="{{default_picture}}" > </ng-template>Pero obtengo un gran seguimiento de la pila de excepciones:
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="{{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 andtodas las directivas se enumeran en "@NgModule.declarations". (" -->
[ERROR ->]<div *ngIf="my_picture; else elseBlock"> <img src="{{my_picture}}" width="180" height="8"): UserComponent@15:8 'ng-template' is not a known element
¿Cómo puedo implementar un simple bloque if - else ?
Deberías estar usando 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>La sintaxis ngIf/Else no está disponible en angular 2 pero está disponible en angular 4
Para angular 2, debe usar ngIf dos veces, y en la segunda vez niega el valor que se está comparando (sin usar! =, pero con el signo ampersand con el valor)
<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>Para angular 4 en adelante
<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>**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>