Angular 8 : Binding elements to an array of objects

Question

I am trying to achieve following

I have 2 fields description and Price.On click of plus button i get another input fields (Input 2 and Price 2) and so on. I want to bind these fields description and Price to an array of an object.

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

  additionDescription:string;
  additionPrice:number;
}

what i am trying and is not working:

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

Button Click

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

Any pointers would be highly appreciated.

Also, why not ngfor over additionsOfProductArray? Your range variable isn't even being used — Aluan Haddad
– Aluan Haddad, Commented Mar 5, 2020 at 20:10
you need to add a new item at the end of additionsOfProductArray — Aluan Haddad
– Aluan Haddad, Commented Mar 5, 2020 at 20:18
In your click Handler, you are increasing the number of items that are meant to be in the array and there by the index, but you aren't actually adding an item in there so there's nothing to bind because there's nothing at that index — Aluan Haddad
– Aluan Haddad, Commented Mar 5, 2020 at 20:22
actually, you do need two way binding. but every time you increase the counter you need to push into the array — Aluan Haddad
– Aluan Haddad, Commented Mar 5, 2020 at 20:27

Ashot Aleqsanyan · Accepted Answer · 2020-03-05 22:00:07Z

2

Please can you try to use this example

in template

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

in Ts

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

I see in the comments you don't want to add items into your additionsOfProductArray array. Please can you explain why? maybe we can find another solution with adding the element into additionsOfProductArray array.

answered Mar 5, 2020 at 22:00

Ashot Aleqsanyan

4,4732 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aluan Haddad Over a year ago

Yes. This is what I was suggesting.

lesnar Over a year ago

@AluanHaddad sorry i did not get it properly. now i know what you meant.

Collectives™ on Stack Overflow

Angular 8 : Binding elements to an array of objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related