Angular ngIf с array.indexOf работает только один раз - PullRequest
Новая
       8

Angular ngIf с array.indexOf работает только один раз

0 голосов
/ 09 февраля 2020

Я разрабатываю приложение магазина с помощью ioni c 4. Я пытаюсь показать кнопку добавления в корзину или плюс, минус значки под каждым отдельным продуктом.

Если товара нет в корзине, показать кнопку добавления (1) 

<div id="add{{ product.id }}" *ngIf="cart.indexOf(product) < 0" (click)="addToCart(product)"><div class="addtoCart"><ion-icon name="md-cart"></ion-icon></div></div>

Если товара в корзине показано количество, плюс, минус значки (2) 

<div id="count{{ product.id }}" *ngIf="cart.indexOf(product) >= 0" style="float: left;width: 50%;">
    <div (click)="decreaseProduct(product)" style="color: #f0ab16;float: left;width: 40%;text-align: center;"><ion-icon name="md-remove-circle-outline"></ion-icon></div>
    <div style="width: 20%;float: left;text-align: center;font-size: 12px" >{{ cart[cart.indexOf(product)].amount }}</div>
    <div (click)="addToCart(product)" style="float: left;width: 40%;text-align: center; color: #f0ab16"><ion-icon name="md-add-circle-outline"></ion-icon></div>
    </div>

Этот код прекрасно работает, но когда я изменил вкладки и вернулся на эту страницу, оператор ngIf не работает. Она застряла на кнопке добавления в корзину (1), но мои товары все еще остаются в корзине. Кнопка Добавить в корзину все еще работает.

Я думаю * ngIf = "cart.indexOf (product)> = 0" работает только один раз. Как я могу заставить это работать должным образом.

1 Ответ

1 голос
/ 09 февраля 2020

Всегда предпочтительнее использовать условие * ngIf в пользовательской функции, а не выполняться в шаблоне; вам может потребоваться создать пользовательскую функцию, которая возвращает логическое значение 

isFound(product:any){
  return cart.find(x=> x.id == product.id);
}

и связать его как 

 *ngIf=isFound(product)
...