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

Answer 1

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>