CODEWITHSUNDEEP
angulartypescript
Sandeep Thomas
Sandeep Thomas

Reputation: 4727

Dynamic Table replaces array elements with new data

I'm trying to build a dynamic table like below

enter image description here

Here I have added 1 row into the table. But when I add next row, the previous row in the table also get changed. Not just when clicking add. When ever I changed something on the header row, all the rows in the table get updated to the new value like this enter image description here

Here is my code and template

<thead>
    <th style="width: 250px;">
        <label for="" class="control-label">Location</label>
        <select [(ngModel)]="selectedBudget.locationName" name="" class="form-control" id="">
            <option *ngFor="let location of locations" [value]="location.locationName">
                {{location.locationName}}
            </option>
        </select>
    </th>
    <th style="width: 100px;" class="text-center">
        <label for="" class="control-label">Days</label>
        <input type="text" [(ngModel)]="selectedBudget.days" class="form-control" placeholder="Days">
    </th>
    <th style="width: 100px;">
        <label for="" class="control-label">Year</label>
        <select [(ngModel)]="selectedBudget.year" name="" class="form-control" id="">
            <option [ngValue]="2020">2020</option>
            <option [ngValue]="2021">2021</option>
        </select>
    </th>
    <th class="text-center">
        <label for="" class="control-label">Cost</label>
    </th>
    <th>
        <button type="button" (click)="addBudget()" class="btn btn-sm btn-primary">ADD</button>
    </th>
</thead>
<tbody>
    <tr *ngFor="let budget of internalBudgets" [id]="budget.locId">
        <td>
            {{budget.locationName}}
        </td>
        <td>{{budget.days}}</td>
        <td>{{budget.year}}</td>
        <td>{{budget.internalCost}}</td>
        <td>
            <div class="btn-group btn-group-sm">
                <button class="btn btn-sm btn-success">Edit</button>
                <button class="btn btn-danger">Remove</button>
            </div>
        </td>
    </tr>
</tbody>

My TS

public selectedBudget: InternalBudget;
public internalBudgets: InternalBudget[] = [];

addBudget(){

let rc:number = this.locations.find(x => x.locationName === this.selectedBudget.locationName && 
  x.year === this.selectedBudget.year).cost *  this.selectedBudget.days;
this.selectedBudget.internalCost=rc;

  this.internalBudgets.push(this.selectedBudget);

}

Upvotes: 0

Views: 87

Answers (4)

Ali
Ali

Reputation: 1

you actually need to create the object selectedBudget. let newObject= { .... init your properties here } and then just push it tu your array

Upvotes: 0

Sandeep Thomas
Sandeep Thomas

Reputation: 4727

Thanks @shadowoviç for giving the hint where I did wrong. So I did that this way.

let ibCopy:InternalBudget= Object.assign({},this.selectedBudget);
this.internalBudgets.push(ibCopy);

Upvotes: 1

Nadhir Houari
Nadhir Houari

Reputation: 410

Try this .push({...selectedBudget});

Upvotes: 0

Nadhir Houari
Nadhir Houari

Reputation: 410

It would be easy if you just pass parameters in your addBudget()
Example :

    addBudget(selectedLocation: Location, selectedDays: number, selectedYears: number) {
         let rc = location.cost *  days;
         this.selectedBudget.internalCost=rc;
         this.selectedBudget.days = days;
         this.selectedBudget.years = years;
         this.internalBudgets.push(this.selectedBudget);
    }

Upvotes: 1

Related Questions