How to make the method work only on the required element from *ngFor?

Question

Angular

The plugin has a list of products that is rendered via *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>

And there is a method in the component that adds the quantity of goods:

public qnt: number = 1;

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

And everything would be OK, but there are a lot of goods and the method changes their number at the same time, i.e. changing the quantity in one commodity, it changes in the others.
Tried to pass 'item' as an argument to the function, got this error Property 'item' does not exist on type AppComponent
Changed {{qnt}} to {{item.qnt}} in the view and the console complained Can't read property qnt of undefined
How to deal with the situation? Perhaps the difficulty is that the item variable from *ngFor is assigned to the render from BehaviorSubject and does this somehow affect?

Answer 1

In short, in order not to invent tops, I added the qnt property to the json object and everything became OK.