ngIf-autre modèle

Je suis en train de charger pictureA ou pictureB.
Ma première solution est comme ceci:

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

Mais je voudrais utiliser if-else comme sur la Référence de l'API:

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

Donc, je suis en train de faire comme ceci:

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

Mais je suis une grosse trace de pile 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="{{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 répertoriés dans le "@NgModule.déclarations". ("
-->

        [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

Comment puis-je mettre en œuvre un simple if-else bloc?

  • Êtes-vous à l'aide de Angular4?
  • Pourquoi ne pas utiliser ngSwitch à la place?
InformationsquelleAutor Roma Kap | 2017-04-22
  1. 10

    Vous devriez être en utilisant ng-modèle

    <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

    • oui, j'ai déjà essayé ce. Mais j'ai cette erreur: SyntaxError Erreur: Modèle erreurs d'analyse: "ng-modèle" n'est pas un élément: 1. Si "ng-modèle" est une composante Angulaire, puis vérifiez qu'il est partie de ce module. 2. Si " ng-modèle est un Composant Web puis ajouter "CUSTOM_ELEMENTS_SCHEMA" pour le " @NgModule.les schémas de la composante de supprimer ce message.
    • la version angulaire ur à l'aide?
    InformationsquelleAutor Aravind
  2. 9

    ngIf/d'Autre syntaxe n'est pas disponible dans angulaire 2, mais il est disponible dans angulaire 4

    Angulaire 2, vous devez utiliser ngIf deux fois, et dans le deuxième temps de vous nier la valeur de l'objet de la comparaison (et non à l'aide de l' !=, mais ayant 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>

    Angulaire 4,

    <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>
    InformationsquelleAutor NitinSingh
  3. 2
    **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>
    InformationsquelleAutor Nitya Kumar