Я пытаюсь построить динамическую c таблицу, как показано ниже
Здесь я добавил 1 строку в таблицу. Но когда я добавляю следующую строку, предыдущая строка в таблице также изменяется. Не только при нажатии Добавить. Когда я что-то изменял в строке заголовка, все строки в таблице обновлялись до нового значения, такого как
Вот мой код и шаблон
<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>
Мой 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);
}