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