При изменении значения в окне диалога менятеся значение в основной таблице

Question

Проект на Angular.

Есть таблица с данными

<mat-card>
  <mat-card-content class="employee-table__content">
    <table class="employee-table__table" mat-table [dataSource]="dataQuiz">
      <!-- Name Column -->
      <ng-container matColumnDef="name" >
        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef > Name </th>
        <td class="employee-table__table-body" mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
    </table>
  </mat-card-content>
</mat-card>

из которой я вызываю диалоговое окно редактирования данных.

openEditDialog(quizDto: QuizDto) {
  const dialogRef = this.dialog.open(QuizEditDialogComponent, {
    data: [quizDto,
      'edit'
    ],
    width: '400px'
  });
}

форма

<mat-dialog-content>
  <p mat-dialog-title>{{dialogTitle}}</p>
  <mat-form-field appearance="standard">
    <mat-label>Name</mat-label>
    <input
      matInput maxlength="100"
      [(ngModel)]="quizDto.name"
      (keydown.enter)="confirm()"
    />
  </mat-form-field>
</mat-dialog-content>

Проблема заключается в следующем. В окне диалога я меняю значение поле "name". Одновременно это же поле меняется в основной таблице. Вроде как все логично, ссылка на один объект, связь двунаправленная. Но это не правильно. Как мне разорвать эту связь? Я не могу придумать ни чего умнее как добавить еще одну переменную

openEditDialog(quizDto: QuizDto) {
  const curQuiz = new QuizDto(quizDto.id, quizDto.name);
  const dialogRef = this.dialog.open(QuizEditDialogComponent, {
    data: [curQuiz ,
      'edit'
    ],
    width: '400px'
  });
}

Но такой код смотрится не очень хорошо. Может есть более красивое решение?

Answer 1

Если нужно скопировать объект, то есть несколько вариантов:

const obj = { a: 1 };
const copy = Object.assign({}, obj);

const obj = { a: 1 };
const copy = {...obj};

С помощью lodash

import * as _ from 'lodash';

const obj = { a: 1 };
copy = _.cloneDeep(obj );

В Angular довольно распространенной практикой считается копирование входных параметров у объекта, чтобы не изменять начальные данные.

БЛОГ НА HUSL

При изменении значения в окне диалога менятеся значение в основной таблице

Ответы (1 шт):