时间戳

首页 > 解决方案 > 无法在 Ionic 的 For 循环中正确设置变量

ionic-framework - 无法在 Ionic 的 For 循环中正确设置变量

问题描述

我正在开发 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是包含产品的数组。所以，这就是我应用循环来检查产品outofstock的原因。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按钮。但问题是它显示所有产品的缺货按钮，因为我的状况运行正常。

任何帮助深表感谢。

标签： ionic-frameworkionic3

解决方案

我认为在您的 ts 文件中包含此逻辑不是一个好主意。您可以在 html 文件中轻松处理此问题。假设您已经在模板（.html）中循环遍历产品数组，并且在每次迭代中您都会获得一个产品对象。由于您的 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 将是一个包含 outofstockp,hassize 每个产品值的数组。但我建议你不要这样做，因为你有最简单的方法在模板中实现你的结果。

推荐阅读