将输入字段绑定到 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"]
  };

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

Answer 1

要使用ngModel，您必须允许绑定输入。您的输入必须在 form 标记内，该标记将角度转换为他自己的特殊形式。 将您的输入包装在表单中并添加#f="ngForm"

 <form id="form-group" #f="ngForm" (ngSubmit)="onSubmit(f)"> 
  <div class="row">
    <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" (click)="decrement(inpt)">-</button>
            <button class="btn btn-outline-secondary" 
            type="button" (click)="increment(inpt)">+</button>
          </div>
          <input type="number" class="form-control" placeholder="0" id="{{subType}}SlotsInput"  min="0" max="10" [name]="type+subType" [value]="type+subType" ngModel #inpt="ngModel">
        </div>
      </div>
    </div>
  </div>
  <button type="submit">send</button>
</form>

在component.ts中：

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

  onSubmit(form){
    console.log(form.form.value);
  }

  increment(input){
    input.control.setValue(parseInt( (input.control.value) || 0 ) +1 );
    console.log(input.control.value);
  }

  decrement(input){
    input.control.setValue(parseInt( (input.control.value) || 0 ) -1 );
    console.log(input.control.value);
  }

}

stackblitz forked example