Блог

В списке товаров для каждого товара есть кнопка «Добавить в корзину». Когда я нажимаю на кнопку, она отключается. Но когда я нажимаю кнопку для другого продукта, кнопка предыдущего продукта снова включается. Как я могу убедиться, что предыдущая кнопка остается отключенной?

HTML-код

 <button class="btn btn-outline-danger btn-sm mt-2" type="button"
                    (click)="btnAddToCart(prod)" [disabled]="itemExists===prod.Id">Add To Cart
</button>
 

код компонента.ts

 itemExists: number;

btnAddToCart(product: ProductList) {
  this.cartService.addToCart(product);
    if (product.Id) {
      this.itemExists = product.Id;
    }
}
 

Вам понадобится какой-то способ отслеживать список идентификаторов продуктов, а не только самые последние, что в настоящее время делает ваш код.

Одно из предложений состоит в том, чтобы перейти itemExists в массив и использовать его для хранения всех добавленных идентификаторов.

 itemExists: number[] = [];

btnAddToCart(product: ProductList) {
  this.cartService.addToCart(product);
    if (product.Id amp;amp; !itemExists.includes(product.id)) {
        this.itemExists.push(product.Id);
    }
}
 

Ваши кнопки могут определять свое состояние с помощью небольшого логического изменения, которое проверяет, включает ли массив текущее product.id.

 <button class="btn btn-outline-danger btn-sm mt-2" type="button"
    (click)="btnAddToCart(prod)" [disabled]="itemExists.includes(prod.Id)">Add To Cart
</button>
 

Помните, что если вы удалите какой — либо товар из корзины, идентификатор должен быть удален из массива-если это имеет смысл для вашего приложения.