Таблица dataSource меняет мой исходный массив, когда я не хочу - Angular Mat-Table

Question

У меня проблема, когда я изменяю ячейку, используя вход в мою таблицу из dataSource (mat-table), в моем исходном массиве также сохранялись ранее изменения. Кто-то может объяснить мне или сказать, где моя ошибка или ошибка концепции или почему мой исходный массив также изменяется, поскольку таблица и входные данные связаны с данными dataSource , а не с массивом users , или это то, во что я верю. Я хочу сохранить исходный массив для восстановления, если пользователь не сохраняет изменения извините за мой плохой engli sh

user.component. html

<table mat-table [dataSource]="dataSource" fxFlex *ngIf="dataSource">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef fxLayoutAlign="start center" fxFlex>
      Nombre y Apellido
    </th>
    <td mat-cell *matCellDef="let client; let i = index" fxLayoutAlign="start center" fxFlex>
      <div *ngIf="client._id !== editable">
        {{ client.name + ' ' + client.surname }}
      </div>
      <div *ngIf="client._id === editable">
        <mat-form-field fxFlex style="margin-right: 7px;">
          <input type="text" matInput placeholder="nombre" [(ngModel)]="client.name" name="name" />
        </mat-form-field>
        <mat-form-field fxFlex class="m-r-20">
          <input type="text" matInput placeholder="apellido" [(ngModel)]="client.surname" name="surname" />
        </mat-form-field>
      </div>
    </td>
  </ng-container>


  <ng-container matColumnDef="options">
    <th mat-header-cell *matHeaderCellDef fxLayoutAlign="start center" fxFlex="100px">
      Edit
    </th>
    <td mat-cell *matCellDef="let client, let i = index" fxLayoutAlign="start center" fxFlex="100px">
      <div *ngIf="client._id !== editable">
        <button matTooltip="Editar cliente" (click)="setEditable(client._id, i); $event.stopPropagation()" class="btn waves-effect waves-light btn-sm btn-success" type="button" style="margin-right: 2px">
                  <i class="mdi mdi-account-edit"></i>
                </button>
        <button class="btn btn-sm btn-danger" matTooltip="Eliminar cliente" (click)="deleteClient(client._id, i); $event.stopPropagation()">
                  <i class="mdi mdi-delete"></i>
                </button>
      </div>
      <div *ngIf="client._id === editable">
        <button matTooltip="Editar cliente" (click)="updateUser(client); $event.stopPropagation()" class="btn waves-effect waves-light btn-sm b-green" type="button" style="margin-right: 2px">
                  <i class="mdi mdi-check"></i>
                </button>
        <button class="btn btn-sm b-red" matTooltip="Cancelar" (click)="setEditable(null, i); $event.stopPropagation()">
                  <i class="mdi mdi-close"></i>
                </button>
      </div>

    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

user.component.ts

export class UsersComponent implements OnInit {
  public users: UserModel[];
  displayedColumns: string[] = ['name', 'options'];
  dataSource: MatTableDataSource<UserModel>;
  public editable = null;
  public roles: Role[] =  [
    { value: 'CLIENT_ROLE', viewValue: 'Cliente' },
    { value: 'USER_ROLE', viewValue: 'Usuario' },
    { value: 'ADMIN_ROLE', viewValue: 'Administrador' },
  ];
  constructor(
    private _user: UserService
  ) { }

  ngOnInit() {
    this._user.getUsers().subscribe((resp: any) => {
      this.users = resp.users;
      this.dataSource = resp.users;
    }, err => {
      console.log('Error', err);
    });
  }
  setEditable(value: string, i: number) {
    if (!value) {
      this.dataSource = this.users;
    }
    this.editable = value;
  }

}

export interface Role {
  value: string;
  viewValue: string;
}

Если я изменяю client.name, меняются мои данные, но меняются и пользователи.

Единственный способ сохранить исходный массив - сохранить в localStorage и это работает, но мне нужно понять.

Answer 1

Я думаю, это потому, что вы устанавливаете источник данных и пользователей на один и тот же ответ, делая его одинаковым экземпляром. Попробуйте сделать их уникальными, назначив вместо них копию.

this.users = [... resp.users]; this.dataSource = [... resp.users];

Просто предположение. И я разговариваю по телефону, поэтому не могу проверить