Как сделать, чтобы метод срабвтывал только на нужном элементе из *ngFor?

Question

[Alexander Belov]

В прилаге есть список товаров, который рендерится через *ngFor:

<ul class="cart">
    <li *ngFor="let item of cartService.cart$ | async">//BehaviorSubject
        <h3 class="title">{{item.title}}</h3>
        <span class="descr">{{item.description}}</span>

         <button (click)="decrQnt()">-</button>

           <form action="#">
             <input type="text" maxlength="3" id="qnt" readonly="readonly" value="{{qnt}}">
            </form>

          <button (click)="incrQnt()">+</button>
     </li>
 </ul>

И есть в компоненте метод, который добавляет количество товара:

public qnt: number = 1;

incrQnt(){
   this.qnt < 100 ? ++this.qnt : 0;
}

И всё бы ОК, но товаров много и метод меняет их количество одновременно, т.е. меняя в одном товаре количество, меняется оно и у остальных.

Пытался передать 'item' в качестве аргумента в функции, получал такую ошибку Property 'item' does not exist on type AppComponent
Менял во вьюхе {{qnt}} на {{item.qnt}} и консоль ругалась Can't read property qnt of undefined

Как разобраться в ситуации? Возможно, сложность в том, что переменная item из *ngFor присвоена к рендеру из BehaviorSubject и это как-то влияет?

Answer 1

[Alexander Belov]

Короче, чтобы не выдумывать ботву, добавил свойство qnt в объект json и всё ОК стало.