Table dataSource当我不希望更改我的原始数组时-Angular Mat-Table

Question

我有一个问题，当我使用来自dataSource（mat-table）的表中的输入修改单元格时，我以前保存的原始数组也发生了更改。有人可以向我解释或告诉我我的错误或概念错误在哪里，或者为什么当表和输入链接到dataSource数据而不是users数组时，原始数组也更改了，或者就是我的意思相信。如果用户不保存更改，我想保留要还原的原始数组对不起我的英语不好

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，我的dataSource也会更改，而且用户也会更改。

我可以保存原始阵列的唯一方法是，如果我将其存储在localStorage及其作品中，但我需要了解。

Answer 1

我认为这是因为您将数据源和用户设置为相同的响应，从而使其成为相同的实例。通过分配副本来尝试使它们唯一。

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

只是一个猜测。而且我在用手机，所以我无法真正检查