Необходимо привязать значение от компонента к представлению (используется * NgFor)

Я использовал *ngFor для создания 3 карт, при нажатии 2 кнопок +/- счетчик должен увеличиваться/уменьшаться. Я привязал измененное значение счетчика к шаблону, но на него реагирует счетчик (Cntr) всех карт. Я хочу, чтобы отдельные карты реагировали на нажатие соответствующей кнопки с соответствующей карты

<form [formGroup]="checkoutData" (ngSubmit)="submitData($event)">
  <div class="allCards">
    <div *ngFor="let card of cardArray; let i=index" >
      <mat-card class="example-card">
        <mat-card-header>
          <p class="productOffer">20% OFF</p>
        </mat-card-header>

          <img  mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg"
            alt="Photo of a Shiba Inu">
            <mat-card-subtitle>{{card.name}}</mat-card-subtitle>
        <mat-card-content>

            <del >₹{{card.orgAmt}}</del>
            <p ngDefaultControl formControlName="discountedAmt">₹{{card.discAmt}} </p>
        </mat-card-content>


        <mat-card-actions>

          <div class="actionItems">
            <mat-form-field style="width:150px;">
              <mat-select  placeholder="Select Quantity">
                <mat-option ngDefaultControl formControlName="foodQuantity" *ngFor="let food of card.foods" [value]="food.value">
                  {{food.viewValue}}
                </mat-option>
              </mat-select>
            </mat-form-field>

            <span class="add-to-cart">
              <button  mat-mini-fab color="primary" (click)="decrCntr(i)" >-</button>
              <span ngDefaultControl formControlName="foodQuantity1">{{cntr}}</span>
              <button  mat-mini-fab color="secondary" (click)="incrCntr(i)" >+</button>
            </span>
          </div>
          <button mat-button type='submit'>Add to Cart</button>

        </mat-card-actions>
      </mat-card>
    </div>
  </div>
</form>

Вот мой файл .ts, где я добавляю +/- переменную Cntr и привязываю это значение к шаблону.

export class CartviewComponent implements OnInit {
cntr: number = 1
checkoutData: FormGroup
orgAmt: number;
discAmt: number;


constructor(private formBuilder: FormBuilder) { }

cardArray = [
{
  name: 'Onion', orgAmt: 30, discAmt: 25, counterVar: 1,
  foods: [{ value: 500, viewValue: '500gm' }, { value: 1, viewValue: '1kg' }, { value: 2, viewValue: '2kg' }],
},
{
  name: 'Potato', orgAmt: 20, discAmt: 15, counterVar: 1,
  foods: [{ value: 500, viewValue: '500gm' }, { value: 1, viewValue: '1kg' }],
},
{
  name: " beet", orgAmt: 10, discAmt: 8, counterVar: 1,
  foods: [{ value: 500, viewValue: '500gm' }, { value: 1, viewValue: '1kg' }, { value: 2, viewValue: '2kg' }],
 }
]

ngOnInit() {
this.checkoutData = this.formBuilder.group({
  discountedAmt: [null, Validators.required],
  foodQuantity: [null, Validators.required],
  foodQuantity1: [null, Validators.required],
})

}

decrCntr(cntrMain) {
if (this.cntr != 1)
  this.cntr -= 1

}

incrCntr(cntrMain) {
this.cntr += 1
}

submitData(formData) {
console.log("formData ", formData);

 }
 }