ngFor and ngIf not working

Question

can you help here guys please

so i'm trying to display the data i got from the backend but seems like *ngFor not working and want to return only enabled sizes how to do it with ngIf

this is the template

<select name="sizeAndPrice" class="form-control">
  <option [value]="size.value" *ngFor="let size of item.field_prices.set_details"> 
   <span>{{(item.commerce_price.amount/100) + size.field_product_size[0].options[0].price}} </span>
   <span>{{(item.commerce_price.amount/100) + sizefield_product_size[0].options[0].price}} EGP</span>
  </option>
</select>

this is the data i get (the part i'm looping on)

commerce_price :                 {amount:12000},
      field_prices : {                
        set_details : {
          field_product_size : [
            {
              enabled :                  0,
              options : [
                {
                  enabled :              1,
                  price_op :             "plus",
                  price :                0
                }
              ]
            },
            {
              enabled :                  1,
              options : [
                {
                  enabled :              1,
                  price_op :             "plus",
                  price :                30
                }

              ]
            }
          ],

          field_sizes_discounts : [
            {
              enabled :                  1,
              options : [
                {
                  enabled :              1,
                  price_op :             "minus",
                  price :                "0"
                }
              ]
            },
            {
              enabled :                  1,
              options : [
                {
                  enabled :              1,
                  price_op :             "minus",
                  price :                "15"
                }
              ]
            }
          ],
        }
      }

so i need to display prices of each size and then subtract the discount and show hide that size if not enabled

What you say *ngFor and *ngIf are not working, what is the behaviour? What is the behaviour you're expecting? Are there any error messages? — user184994
You can not combine a *ngFor and a *ngIf in one html tag — Shinigami
okay but if but if i removed the ngIf still doesn't work ,, plus how to filter the ngIf — Omar Abdelhady
oh it works but what i need to do is to loop the set details to access the discount as well that is not working let me edit the question — Omar Abdelhady

Vugar Abdullayev Vugar Abdullayev · Accepted Answer · 2018-08-12T19:19:15

You are using *ngFor and *ngIf on same element which is not allowed. Solution is to wrap span content with <ng-container>

   <select name="sizeAndPrice" class="form-control">
          <option [value]="size.value" *ngFor="let size of item.field_prices.set_details.field_product_size" "> 
           <ng-container `*ngIf="item.field_prices.set_details.field_product_size.enabled; else notEnabled"`> 
             <span>{{(item.commerce_price.amount/100) + size.options[0].price}} </span>
             <span>{{(item.commerce_price.amount/100) + size.options[0].price}} EGP</span>
          </ng-container>
           <ng-template #notEnabled><option></option> </ng-template>
          </option>
        </select>

ngFor and ngIf not working

1 Answers