Je développe un site médical, je souhaite afficher une alerte dans la page de medicament.component.HTML lorsque la quantité de médicaments est <50. J'ai fait ça :

 <span *ngFor="let medicament of medicaments" >
        <span *ngIf="{{medicament.quantity}} < 50">
             <div class="callout callout-danger lead">
          <h4>Alert!</h4>
          <p>Vous devez charger le stock de medicaments {{medicament.nom}}                         
  de type {{medicament.type}}  </p>
        </div>
        </span></span>

Mais je ne sais pas pourquoi cela ne fonctionne pas, l'erreur est:

       > Unhandled Promise rejection: Template parse errors:
        TypeError: Cannot read property 'toUpperCase' of undefined ("<span              
       *ngIf="medicaments">
    <span *ngFor="let medicament of medicaments" >
        <span [ERROR ->]*ngIf="{{medicament.quantity}} < 50">
             <div class="callout callout-danger lead">
       "): MedicamentComponent@26:18
     Can't bind to '*ngIf' since it isn't a known property of 'span'.             
     ("<span *ngIf="medicaments">
    <span *ngFor="let medicament of medicaments" >
        <span [ERROR ->]*ngIf="{{medicament.quantity}} < 50">
             <div class="callout callout-danger lead">
      "): MedicamentComponent@26:18
4
Chebbi Ala Eddine 20 avril 2017 à 11:45

3 réponses

Meilleure réponse

Vous ne devriez pas utiliser l'interpolation {{ }} dans ngIf; il attend une expression:

<span *ngIf="medicament.quantity < 50">
23
Sasxa 20 avril 2017 à 08:49

Ici, dans vos journaux, vous pouvez voir le point d'erreur:

 <span [ERROR ->]*ngIf="{{medicament.quantity}} < 50">

Et c'est parce que vous utilisez une expression sur une propriété là où vous ne devriez pas. Il vous suffit d'utiliser la propriété que vous comparez:

 <span *ngIf="medicament.quantity < 50">
0
Jai 20 avril 2017 à 08:53

NgIf est déjà dans le contexte angulaire, ce qui signifie que vous devez supprimer les crochets {{}}

1
Merx 20 avril 2017 à 08:53