Whenever the addRoom button is clicked, I want to add an object to an array. The problem is that the data in my array keeps getting repeated. Please excuse any language errors in my explanation. Feel free to ask me for clarification in the comments below. Thanks for taking the time to read this!
Here is my code:
<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>
Typescript 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)
}
}