将输入字段绑定到ngFor循环中的按钮|角度2 +

Question

我正在尝试在一个带有+和 - 按钮的表单中创建一些数字输入，它们可以增加/减少数字值。我使用存储在几个数组中的值创建带有* ngFor循环的输入和按钮。

但是我无法想出一种方法将输入绑定到也在同一个* ngFor循环中创建的按钮。我一直遇到这个错误 - Cannot assign to a reference or variable!

我尝试过使用ngModel，只是绑定[value]。我得到同样的错误。

还有其他办法吗？

Stackblitz演示 - https://stackblitz.com/edit/angular-m3gkrq

我尝试过的代码 -

  <div class="border rounded p-4 m-1" *ngFor="let type of types">
    <div *ngFor="let subType of subTypes[type]">
      <label for="{{subType}}SlotsInput">{{type | titlecase}} : {{subType}}</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <button class="btn btn-outline-secondary" type="button">-</button>
          <button class="btn btn-outline-secondary" type="button" (click)="(type+subType)++">+</button>
        </div>
        <input type="number" class="form-control" placeholder="0" id="{{subType}}SlotsInput"  min="0" max="10" [name]="type+subType" [(ngModel)]="type+subType">
      </div>
    </div>
  </div>

-

export class AppComponent  {
  types = ["dog", "horse", "hen", "elephant"];
  subTypes = {
    dog:["labrador", "vizsla"],
    horse:["arabian","shire","belgian"],
    hen:["plymouth rock", "leghorn", "bramha"],
    elephant:["african", "asian"]
  };

编辑：如果不清楚，我希望+和 - 按钮增加/减少它们旁边输入字段中的数字。