Angular 8: привязка элементов к массиву объектов - PullRequest
Новая
       12

Angular 8: привязка элементов к массиву объектов

0 голосов
/ 05 марта 2020

Я пытаюсь добиться следующего

elements_in_loop

У меня есть описание 2 полей и цена. При нажатии кнопки «плюс» я получаю другие поля ввода (Input 2 и цена 2) и тд. Я хочу привязать описание этих полей и 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;

Любые указатели будут высоко оценены.

1 Ответ

2 голосов
/ 06 марта 2020

Пожалуйста, попробуйте использовать этот пример

в шаблоне 

<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.

...