Не удается правильно установить переменную в For Loop в Ionic

Question

Я работаю над приложением Ionic Ecommerce и проверяю на складе для продуктов, использующих 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 кнопки, если продукт outofstock , это будет кнопка outofstock , в противном случае он покажетКнопка addtocart .Но проблема в том, что он показывает кнопку outofstock для всех продуктов, потому что мое состояние работает правильно.

Любая помощь очень ценится.

Answer 1

Я не думаю, что это хорошая идея, чтобы иметь эту логику в вашем файле 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 будет идентификатор вашего продукта или объект продукта, а Value будет массивом, содержащим outofstockp, значения hassize для каждого продукта.Но я советую вам не делать этого, так как у вас есть самый простой способ добиться вашего результата в шаблоне.

Answer 2

this. outofstockp = true обновляется в каждом цикле, вам нужно использовать * ngFor в шаблоне и использовать массив вместо одного значения, ваш код содержит ошибки, пожалуйста, проверьте логику, прежде чем задавать такой вопрос