Question

我正在使用Ionic电子商务应用，正在使用0或1检查产品的缺货。

这是我的 productdetails.ts ：

outofstockp: boolean = false;

for(var k in this.detailsp.msg)
{
  console.log(this.detailsp.msg[k].out_of_stock);
  if(this.detailsp.msg[k].out_of_stock === "1")
  {
    this.outofstockp = true;
    this.hassize = false;
  }
}

在此，this.detailsp.msg是包含产品的数组。因此，这就是为什么我将循环应用于检查产品缺货的原因。 console.log(this.detailsp.msg[k].out_of_stock);给我3个输出1、0和0，因为我有3个产品，但问题是所有产品都放在this.outofstockp = true;上。

这是我的 productdetails.htm l：

<ion-col *ngIf="hassize" style="padding: 0px;">
      <button [disabled]="!product.SelectedSize" class="mybtn11" (click)="addToCart(product)" ion-button small>
        Add to Cart
      </button>
</ion-col>

<ion-col *ngIf="outofstockp" style="padding: 0px;">
    <button disabled class="mybtn11" ion-button small>
      Out Of Stock
    </button>
</ion-col>

在此，我使用了2个按钮，如果产品缺货，它将显示缺货按钮，否则将显示 addtocart 按钮。但是问题在于，由于我的状况运行正常，因此所有产品均显示缺货按钮。

非常感谢您的帮助。

Answer 1

this. outofstockp = true在每个循环中都进行了更新，您需要在模板中使用* ngFor并使用数组而不是单个值，您的代码有错误，请在询问此类问题之前先检查一下逻辑

Answer 2

我认为在您的ts文件中包含此逻辑不是一个好主意。您可以在html文件中轻松处理此问题。假设您已经在 template（.html）中遍历product数组，并且在每次迭代中都获得了product对象。由于您的ts文件表明您的产品对象具有一个名为out_of_stock的属性，因此您可以直接在html中使用该属性。

这样的事情，

<ion-col *ngIf="product.out_of_stock == '0'" style="padding: 0px;">
      <button [disabled]="!product.SelectedSize" class="mybtn11" (click)="addToCart(product)" ion-button small>
        Add to Cart
      </button>
</ion-col>

<ion-col *ngIf="product.out_of_stock == '1'" style="padding: 0px;">
    <button disabled class="mybtn11" ion-button small>
      Out Of Stock
    </button>
</ion-col>

如果只想在TS文件中处理此问题，则需要考虑使用Key，Value，其中“ Key”中的将是您的产品ID或产品对象，“ Value”将是一个包含脱销的数组，每个数组都具有大的值产品。但是我建议您不要这样做，因为您可以通过最简单的方法在模板中获得结果。

无法在Ionic的For Loop中正确设置变量

2 个答案: