将输入字段绑定到ngFor循环内的按钮|(Bind input fields to buttons within ngFor loops | Angular 2+)

 我正在尝试在窗体中创建一些数字输入，其旁边有+和 - 按钮，可以增加/减少数字值。 我使用存储在几个数组中的值创建输入和带有* ngFor循环的按钮。 
 
 但是我找不到一种方法将输入绑定到同一个* ngFor循环中创建的按钮。 我一直Cannot assign to a reference or variable!这个错误 - 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"]
  };
 
 编辑：因为它不清楚，我希望+和 - 按钮增加/减少旁边输入字段中的数字。 

I am trying to create some number inputs in a form with + and - buttons next to them which can increase/decrease the number values. I am creating the inputs and the buttons with *ngFor loops using values stored in a couple of arrays.
 
However I can't figure out a way to bind the inputs to buttons that are also created in the same *ngFor loops. I keep running into this error -- Cannot assign to a reference or variable!
 
I have tried using ngModel and just binding with [value]. I get the same error either way. 
 
Is there another way to do this?
 
Stackblitz demo -- https://stackblitz.com/edit/angular-m3gkrq
 
Code that I have tried --
 
  <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"]
  };
 
Edit: Incase it isn't clear, I want the + and - buttons to increase/decrease the number in the input field next to them.

原文：https://stackoverflow.com/questions/48954732