Question

我在一个页面上有多个按钮，＆＃34;添加到购物车＆＃34;每个按钮具有唯一ID属性的按钮。

我想在用户点击时隐藏特定按钮。

问题：

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

预期行为：

当用户点击按钮1 时，即使点击按钮2

，它也会隐藏并保持隐藏状态

P.S。按钮（产品）的信息被添加到数组中。

当前代码：

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
}

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

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

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

4 个答案: