Dynami c Таблица заменяет элементы массива новыми данными - PullRequest
0 голосов
/ 20 апреля 2020

Я пытаюсь построить динамическую c таблицу, как показано ниже

enter image description here

Здесь я добавил 1 строку в таблицу. Но когда я добавляю следующую строку, предыдущая строка в таблице также изменяется. Не только при нажатии Добавить. Когда я что-то изменял в строке заголовка, все строки в таблице обновлялись до нового значения, такого как enter image description here

Вот мой код и шаблон

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

}

Ответы [ 4 ]

1 голос
/ 20 апреля 2020

Спасибо @ shadowoviç за подсказку, где я ошибся. Так я и сделал.

let ibCopy:InternalBudget= Object.assign({},this.selectedBudget);
this.internalBudgets.push(ibCopy);
1 голос
/ 20 апреля 2020

Было бы просто, если бы вы просто передали параметры в addBudget()
Пример:

    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);
    }
0 голосов
/ 20 апреля 2020

Попробуйте это .push({...selectedBudget});

0 голосов
/ 20 апреля 2020

вам на самом деле нужно создать объект selectedBudget. пусть newObject = {.... инициализировать ваши свойства здесь}, а затем просто pu sh это ваш массив

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...