CODEWITHSUNDEEP
angular
Đức Lê
Đức Lê

Reputation: 55

Push object into array and *ngFor it

When i click button addRoom i want add to araay an Object . And loop this in view . But data in my array repeated . Sorry for my english if you can't understand may ask me in comment . Thanks for reading!

my code : html

<table class="booking-table">
<tr>
    <th>ROOM</th>
    <th>5 + YRS</th>
    <th>0-5 YRS</th>
    <th>PER NIGHT</th>
</tr>
<tr *ngFor="let item of Room">
    <td>{{item.room}}</td>
    <td>
        <select [ngModel]="item.audutModel" (ngModelChange)="AddAdults($event)">
            <option value="1">
                1 Adults
            </option>
            <option value="2">
                2 Adults
            </option>
            <option value="3">
                3 Adults
            </option>
        </select>
    </td>
    <td>
        <select [ngModel]="item.childModel" (ngModelChange)="AddChild($event)">
            <option value="1">
                1 Child
            </option>
            <option value="2" *ngIf="  this.Adults == 1 || this.Adults == 2 ">
                2 Child
            </option>
            <option value="3"  *ngIf="  this.Adults == 1 ">
                3 Child
            </option>
        </select>
    </td>
    <td>{{item.pricePN}}</td>
</tr>
<button type="" (click)="AddRoom()">add room</button>

ts code :

  AddAdults(Adults){
    this.Adults = Adults;
    console.log(this.Adults)
    this.pricePerAd = 200;
    this.price = 1000 + Adults*this.pricePerAd;

  }

  AddChild(child){
  this.pricePerCh = 100;
  this.price += child*this.pricePerCh;


  }



 AddRoom(){


    this.audutModel = "audut";
    this.childModel = "child";
    this.RoomNumber = this.RoomNumber + 1 ;

    this.audutModel =   this.audutModel + this.RoomNumber;
    this.childModel = this.childModel + this.RoomNumber;


   this.object.room = this.RoomNumber;
   this.object.audut = this.audutModel;
   this.object.child = this.childModel;
   this.object.pricePN = this.price;

   this.Room.push(this.object)
}

}

Upvotes: 3

Views: 3490

Answers (1)

AVJT82
AVJT82

Reputation: 73387

You are referring to this.object everywhere, so that automatically means that all objects in the array are the same. You need to have each item as an unique item to be able to differentiate them.

Here's a really rough example you should improve and work further with. Also notice the naming convention, e.g I'm referring to rooms = [] instead of Room = []. Also consider making an Interface for Room model.

Okay, when adding a new room, create an empty object and increment a local variable idx, which refers to the index in the array, and after adding a room, let's just increment that:

addRoom(){
  this.rooms.push({room: this.idx+1, adult: null, child: null, pricePN: null})
  this.idx++;
}

In your template, use two-way-binding and when you are adding an adult (and child), this way we won't need to call a separate function to add the number of child or parent in that room. But when changes are made, call calculate instead, passing the index (i), which has been declared in the iteration of rooms

<select [(ngModel)]="item.adult" (change)="calculate(i)">

and the calculate-function just summing up the amount with the prices you have:

calculate(index) {
  this.rooms[index].pricePN = 
        1000+this.rooms[index].adult*200+this.rooms[index].child*100;
}

You had quite a lot of variables, from which you can basically remove all, except the declaration of the array.

Here's a DEMO to play with.

Upvotes: 2

Related Questions