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

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

我想在用户单击某个按钮时隐藏它

问题：

<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>

当前的情况是，当用户单击按钮1时，它会隐藏，然后单击按钮2时，它会隐藏，但同时会显示按钮1

预期行为：

<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>

当用户单击按钮1时，即使在单击按钮2后，也应隐藏并保持隐藏状态

另外，按钮（产品）的信息被添加到数组中

当前代码：

<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>

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:

HTML:

添加

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

JS:

HTML:

添加

这背后的逻辑是在产品单击“添加到购物车”时在产品中创建一个新属性。最初，将不存在名为isHidden的属性。因此，它将返回undefined，undefined将被视为false

---

这背后的逻辑是在产品单击“添加到购物车”时在产品中创建一个新属性。最初，将不存在名为isHidden的属性。因此，它将返回undefined，undefined将被视为false。

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

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

HTML

---

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

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

HTML

---

我建议如下：

<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
}

添加
私有hiddenProducts=新集合（）；
产品：FooProduct[]=[]；
装载产品（）{
this.products=//一些值
hiddenProducts=新集合（）；
}
isInCart（产品：FooProduct）：布尔值{
返回此.hiddenProducts.has（产品）；
}
addToCart（产品：食品产品，索引：编号）{
//可选：检查元素是否已添加？
this.hiddenProducts.add（产品）；
//剩下的addToCart逻辑
}

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

为什么不使用索引作为标识符？

---

弱抗列表突变（筛选、重新排序等）

我建议如下：

<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
}

添加
私有hiddenProducts=新集合（）；
产品：FooProduct[]=[]；
装载产品（）{
this.products=//一些值
hiddenProducts=新集合（）；
}
isInCart（产品：FooProduct）：布尔值{
返回此.hiddenProducts.has（产品）；
}
addToCart（产品：食品产品，索引：编号）{
//可选：检查元素是否已添加？
this.hiddenProducts.add（产品）；
//剩下的addToCart逻辑
}

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

为什么不使用索引作为标识符？

---

对列表突变（筛选、重新排序等）的抵抗力较弱。

IMO在模板级别隐藏hiddenButton数组的实现会更好。考虑一个IsIDDEN（I）或IsIDDEN（Product）方法来实现.@ JoaT.Teledo:AdvestMIO在模板级别隐藏HIDENButt数组的实现会更好。考虑一个iSIDDEN（I）或IsIDDEN（Product）方法来实现。

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

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

<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
}