angular - ngFor 和 ngIf 不起作用

Question

你能帮帮我吗？

所以我试图显示我从后端获得的数据，但似乎 *ngFor 不起作用并且只想返回启用的大小如何使用 ngIf

这是模板

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

这是我得到的数据（我正在循环的部分）

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"
                }
              ]
            }
          ],
        }
      }  

所以我需要显示每种尺寸的价格，然后减去折扣并显示隐藏该尺寸（如果未启用）

标签： angularangular5angular6ngforangular-ng-if

Answer 1

您在不允许的同一元素上使用 *ngFor 和 *ngIf。解决方案是用<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>