Обновить переменную в *ngFor Angular

У меня есть *ngFor, и я пытаюсь обновить метку {{subtotal}} по щелчку, но он обновляет все элементы с одинаковым значением. То же самое и с {{quantity}}. Есть ли способ создать локальные переменные? Вот мой код

HTML

 <CardView class="cardStyle" *ngFor="let card of shoppingCart; let i = index;">

  <Label text="{{card?.product.productName}}" textWrap="false" class="product-title " row="1" col="0"></Label>

  <Label text="Quantity:{{quantity}}" textWrap="true" col="1" row="2" class="product-quantia" ></Label>

  <Label text="subtotal:{{subtotal}}" textWrap="true" col="1" row="2" class="product-quantia" ></Label>

  <Button text="&#xf056;" class="item-share-shop-save" (tap)="increase(card, i)" ></Button>

 </CardView>

мой компонент ТС

 subtotalResult:any = null;
 quantity: any;

increase(card:any, id:number){

   card.quantity += 1;
   this.subtotalResult = card.quantity * card.unitPrice; 

}

angular angular8 angular6 angular5
person Kevin Dias    schedule 09.09.2019    source источник
comment
Есть ли какие-либо входные данные для обновления промежуточного итога на странице?   -  person Andrew Junior Howard    schedule 09.09.2019
comment
@AndrewJuniorHoward нет, просто пользователь нажимает увеличить, обновляет число   -  person Kevin Dias    schedule 09.09.2019

Ответы (2)


arrow_upward
2
arrow_downward

Поскольку у вас есть quantity и subtotalResult в качестве глобального элемента, изменение для 1 элемента изменяет все.

Сделайте их массивом, если каждый элемент.

Попробуйте так:

HTML:

<Label text="Quantity:{{quantity[i]}}" textWrap="true" col="1" row="2" class="product-quantia" ></Label>

<Label text="subtotal:{{subtotal[i]}}" textWrap="true" col="1" row="2" class="product-quantia" ></Label>

Машинопись:

 subtotalResult: any[] = [];

  increase(card: any, index: any) {

    card.quantity += 1;
    this.subtotalResult[index] = card.quantity * card.unitPrice;

  }

Разветвленный stackbiltz

person Adrita Sharma    schedule 09.09.2019
comment
this.quantity[index] = card.quantity вызывает эту ошибку Cannot create property 'undefined' on number '1' - person Kevin Dias; 09.09.2019
comment
Можете ли вы поделиться им в stackbiltz с демонстрационными данными. Будет проще написать код - person Adrita Sharma; 09.09.2019
comment
В своем HTML вы забыли добавить ;let i = index. Должно быть *ngFor="let card of shoppingCart;let i = index" - person Adrita Sharma; 09.09.2019
comment
был мой плохой, переменная вызывалась внутри цикла foreach, спасибо - person Kevin Dias; 09.09.2019
comment
я заметил, что если вы сначала увеличиваете элемент 2, первый элемент исчезает stackblitz.com/edit/angular-bspnct - person Kevin Dias; 09.09.2019
comment
Модифицированный ответ. У вас было 2 условия для отображения количества: lfor меньше 1 и 1 больше 1. У вас должна быть одна и та же логика. - person Adrita Sharma; 09.09.2019
comment
Для (›1) u отображались из массива, а для (‹1) u отображались card.quantity. Так что оба не совпали. Теперь я изменил ответ, чтобы каждый раз он отображал card.quantity - person Adrita Sharma; 09.09.2019

arrow_upward
1
arrow_downward

Такого рода вещи лучше делать с реактивной формой, НО, поскольку у вас нет полей ввода, вы можете сохранить форму, управляемую шаблоном.

При создании «shoppingCart», как я предполагаю из вашего API, вам нужно пройтись по каждому элементу в массиве и убедиться, что для начала есть значение количества и промежуточного итога, т.е. quantity:0 и subtotal:0 для каждого элемента. Тогда следующий шаблон будет работать:

<CardView class="cardStyle" *ngFor="let card of shoppingCart; let i = index;">

  <Label text="{{card?.product.productName}}" textWrap="false" class="product-title " row="1" col="0"></Label>

  <Label text="Quantity:{{card?.quantity}}" textWrap="true" col="1" row="2" class="product-quantia" ></Label>

  <Label text="subtotal:{{card?.subtotal}}" textWrap="true" col="1" row="2" class="product-quantia" ></Label>

  <Button text="&#xf056;" class="item-share-shop-save" (tap)="increase(card, i)" ></Button>

 </CardView>

Затем в вашей функции увеличения:

increase(card: any, index: any) {

    shoppingCart[index].quantity += 1;
    shoppingCart[index].subtotal = card.subtotal * card.quantity 

  }

Вам всегда нужно обновлять «shoppingCart», потому что раньше вы просто обновляли ссылку, которая ничего не сделает, поскольку ваш шаблон основан на «shoppingCart».

person Andrew Junior Howard    schedule 09.09.2019