CODEWITHSUNDEEP
angulartypescriptjhipster
Chebbi Ala Eddine
Chebbi Ala Eddine

Reputation: 175

Angular 2 TypeError: Cannot read property 'toUpperCase' of undefined

I am developing a medical website , i want show alert in page of medicament.component.HTML when the quantity of medicaments is < 50 . I did this :

 <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>

But i don't know why it doesn't work , the error is :

       > 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

Upvotes: 4

Views: 13481

Answers (3)

Merx
Merx

Reputation: 21

ngIf is already in the angular context, which means, that you must remove the brackets {{}}

Upvotes: 1

Jai
Jai

Reputation: 74738

Here in your logs you can see the point of error: 

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

and it is because you are using an expression on a property where you shouldn't. You just need to use property you are comparing: 

 <span *ngIf="medicament.quantity < 50">

Upvotes: 0

Sasxa
Sasxa

Reputation: 41314

You shouldn't use interpolation {{ }} in ngIf; it expects an expression:

<span *ngIf="medicament.quantity < 50">

Upvotes: 24

Related Questions