Angular 8 : 将元素绑定到对象数组

Question

我正在努力实现以下目标

我有 2 个字段描述和 Price.On 单击加号按钮我得到另一个输入字段（输入 2 和价格 2）等等。我想将这些字段 description 和 Price 绑定到一个对象数组。

additionsOfProductArray: Array<NewProductAddition>=[];
class NewProductAddition{

  additionDescription:string;
  additionPrice:number;
}

我正在尝试但不起作用的方法：

 <div class="row mt-5"
        *ngFor="let currentNumber of numberOfTimesAdditionArray | slice:0:numberOfTimesAdditions;let i = index">
        <div class="col-8">
          <input type="text" class="form-control" name="additionDescription" placeholder="Auswahl Beschriebung Eingeben"
            [(ngModel)]="additionsOfProductArray[i].additionDescription">
        </div>
        <div class="col-4 ">
          <div class=" ml-5 input-group-prepend">
            <span class="input-group-text">€</span>
            <input type="number" class="form-control col-xs-3 priceinput" min="1" step="any"  name="articlePrice"
              [(ngModel)]="additionsOfProductArray[i].additionPrice">
            <span class="input-group-text">.00</span>
          </div>
        </div>
      </div>

按钮点击

<div class="col-2">
          <button (click)="increaseTheAdditionNumber()">
            <span class="glyphicon glyphicon-plus"></span>
          </button>
        </div>


  increaseTheAdditionNumber(){
    this.numberOfTimesAdditionArray=[];
    this.numberOfTimesAdditionArray= [...Array(++this.numberOfTimesAdditions).keys()] ;
  }


 numberOfTimesAdditionArray=[...Array(this.numberOfTimesAdditions).keys()];
  numberOfTimesAdditions=1;

任何指点将不胜感激。

Answer 1

请你尝试使用这个例子

在模板中

<div class="row mt-5"
        *ngFor="let product of additionsOfProductArray; let i = index">
        <div class="col-8">
          <input type="text" class="form-control" name="additionDescription" placeholder="Auswahl Beschriebung Eingeben"
            [(ngModel)]="product.additionDescription">
        </div>
        <div class="col-4 ">
          <div class=" ml-5 input-group-prepend">
            <span class="input-group-text">€</span>
            <input type="number" class="form-control col-xs-3 priceinput" min="1" step="any"  name="articlePrice"
              [(ngModel)]="product.additionPrice">
            <span class="input-group-text">.00</span>
          </div>
        </div>
      </div>

在 Ts

increaseTheAdditionNumber(){
    this.additionsOfProductArray.unshift(new NewProductAddition());
    // or the example below if you want to 
    // this.additionsOfProductArray.push(new NewProductAddition());
}

我在评论中看到您不想将项目添加到 additionsOfProductArray 数组中。请你解释一下为什么？也许我们可以找到另一种解决方案，将元素添加到 additionsOfProductArray 数组中。

Angular 8 : 将元素绑定到对象数组

Angular 8 : Binding elements to an array of objects

angular

typescript

angular-forms