Angular / Javascript - 隐藏id为onclick的按钮

Question

我在一个页面上有多个按钮，“添加到购物车”按钮，其中每个按钮都有一个唯一的id属性。

我希望在用户点击它时隐藏特定按钮。

问题：

目前正在发生的事情是当用户点击它隐藏的按钮1时，然后点击它隐藏的按钮2，但同时显示按钮1

预期的行为：

当用户点击按钮1时，即使点击按钮2，它也应该隐藏并保持隐藏状态

附：按钮（产品）的信息被添加到数组中。

当前代码：

HTML：

<div *ngFor="let product of products; let i = index">
<div *ngIf="hideButton != i" [attr.id]="i" class="addButton" (click)="addToCart(product, i)">ADD</div>
</div>

JS

addToCart(itemDetails, index) {
  this.hideButton = index;
}

Answer 1

您需要一组隐藏按钮，您需要将索引添加到该数组：

JS：

// at the top
hiddenButtons = [];

addToCart(itemDetails, index) {
  this.hiddenButtons.push(index);
}

HTML：

<div *ngFor="let product of products; let i = index">
<div *ngIf="hiddenButton.indexOf(i) === -1" [attr.id]="i" class="addButton" (click)="addToCart(product, i)">ADD</div>
</div>

Answer 2

如果您有一个添加了产品的购物车，您可以在购物车中查看产品是否已经存在，并使用它来决定是否显示ADD按钮。

如果产品对象可以具有更多属性，则可以完全取消索引。

HTML

<div *ngFor="let product of products">
    <div *ngIf="productInCart(product)" [attr.id]="product.id" class="addButton" (click)="addToCart(product)">ADD</div>
</div>

JS

productInCart(product) {
    return this.products.findIndex(p => p.id==product.id)!=-1;
}
addToCart(product) {
    this.products.push(product);
}

Answer 3

<div *ngFor="let product of products; let i = index">
<div *ngIf="!product.isHidden" [attr.id]="i" class="addButton" (click)="addToCart(product, i)">ADD</div>
</div>

在组件中

 addToCart(itemDetails, index) {
  itemDetails.isHidden = true;
  this.products[index] = itemDetails;
 }

这背后的逻辑是在点击添加到购物车时在产品中创建新属性。最初将没有名称为isHidden的属性。因此，它将返回undefined，undefined将视为false。

Answer 4

我建议如下：

<div *ngFor="let product of products; let i = index">
<div *ngIf="!isInCart(product)" [attr.id]="i" class="addButton" (click)="addToCart(product, i)">ADD</div>
</div>

private hiddenProducts = new Set<FooProduct>();
products: FooProduct[] = [];    

loadProducts(){
   this.products = // some value
   hiddenProducts = new Set<FooProduct>();
}

isInCart(product: FooProduct): boolean {
   return this.hiddenProducts.has(product);
}

addToCart(product: FooProduct, index: number){
    // optional: check if the element is already added?
    this.hiddenProducts.add(product);
    // rest of your addToCart logic
}

为什么使用集合而不是简单的数组？性能：访问时间不变。

为什么不使用索引作为标识符？弱列表突变（过滤，重新排序等）