javascript - 根据数组中的 Id 角度增加减少数量

Question

在这种情况下，我想实现动态增加减少数组中的计数。我有一个产品列表，我必须在将项目添加到购物车之前增加或减少计数

这是HTML

<div class="add-prdct">
   <p (click) = "removeItem(item.id); 'pid = item.id' ">-</p>
   <span *ngIf="item.id === pid && isclicked === true">{{ itemCount }}</span>
   <span *ngIf="isclicked === false">1</span>
   <p (click) = "addItem(item.id); 'pid = item.id'">+</p>
</div>

这里的项目来自ngFor Loop

TS

addItem(id: any, index: any): void {
    this.itemCount++;
    this.pid = id;
    this.isclicked = true;
    // this.itemCount = this.itemCount + 1;
  }

  removeItem(id: any, index: any): void {
    this.pid = id;
    if (this.itemCount === 1) {
      this.itemCount = 1;
    } else {
      this.itemCount--;
    }
  }

并itemCount = 1初始化

问题是当我在一个产品中增加其他产品时，{{ itemCount }}它不持有 1 值

帮助

标签： javascriptangulartypescriptangular8

Answer 1

您itemCount在所有项目之间共享相同的内容。您需要对每个项目进行计数。您可以Map像这样使用它来实现它：

HTML

<div class="add-prdct">
   <p (click) = "removeItem(item.id); 'pid = item.id' ">-</p>
   <span *ngIf="item.id === pid && isclicked === true">{{ itemsCountMap.get(item.id) }}</span>
   <span *ngIf="isclicked === false">1</span>
   <p (click) = "addItem(item.id); 'pid = item.id'">+</p>
</div>

TS

const itemsCountMap = new Map<any, number>();

// when initializing an item with id:
  this.itemsCountMap.set(id, 1);

// when incrementing
  addItem(id: any, index: any): void {
    const currentCount = this.itemsCountMap.get(id);

    this.itemsCountMap.set(id, currentCount + 1);
    this.pid = id;
    this.isclicked = true;
  }

// when decrementing
  removeItem(id: any, index: any): void {
    const currentCount = this.itemsCountMap.get(id);

    this.pid = id;
    if (currentCount > 0) {
      this.itemsCountMap.set(id, currentCount - 1);
    }
  }