O que é uma alternativa ao angular.copy no Angular

Como posso copiar um objeto e perder sua referência no Angular?

Com o AngularJS, posso usar angular.copy(object), mas estou recebendo algum erro ao usá-lo no Angular.

EXCEÇÃO: ReferenceError: angularnão está definido

Supondo que você esteja usando o ES6, você pode usá-lo var copy = Object.assign({}, original). Funciona em navegadores modernos; se você precisar oferecer suporte a navegadores antigos, confira este polyfill

atualizar:

Com o TypeScript 2.1+, a notação abreviada de objeto ES6 está disponível:

const copy = { ...original }

Até termos uma solução melhor, você pode usar o seguinte:

duplicateObject = <YourObjType> JSON.parse(JSON.stringify(originalObject));

EDIT: Esclarecimento

Observação: a solução acima foi projetada apenas para ser um liner de correção rápida, fornecido no momento em que o Angular 2 estava em desenvolvimento ativo. Minha esperança era que pudéssemos obter um equivalente angular.copy(). Portanto, eu não queria escrever ou importar uma biblioteca de clonagem profunda.

Este método também possui problemas com a análise das propriedades da data (ele se tornará uma sequência).

Por favor, não use esse método em aplicativos de produção . Use-o apenas em seus projetos experimentais - aqueles que você está fazendo para aprender o Angular 2.

A alternativa para copiar objetos com objetos aninhados é usar o método cloneDeep do lodash.

Para Angular, você pode fazer assim:

Instale o lodash com yarn add lodashou npm install lodash.

No seu componente, importe cloneDeepe use-o:

import { cloneDeep } from "lodash";
...
clonedObject = cloneDeep(originalObject);

São apenas 18kb adicionados à sua compilação, vale a pena pelos benefícios.

Também escrevi um artigo aqui , se você precisar de mais informações sobre o porquê do uso do cloneDeep do lodash.

Para cópia superficial, você pode usar Object.assign, que é um recurso do ES6

let x = { name: 'Marek', age: 20 };
let y = Object.assign({}, x);
x === y; //false

NÃO o use para clonagem profunda

Use lodash como bertandg indicado. O motivo pelo qual o angular não possui mais esse método é porque o angular 1 era uma estrutura independente e as bibliotecas externas frequentemente enfrentavam problemas com o contexto de execução angular. O Angular 2 não tem esse problema; portanto, use a biblioteca que você deseja.

https://lodash.com/docs#cloneDeep

Se você deseja copiar uma instância de classe, também pode usar Object.assign, mas precisa passar uma nova instância como primeiro parâmetro (em vez de {}):

class MyClass {
    public prop1: number;
    public prop2: number;

    public summonUnicorn(): void {
        alert('Unicorn !');
    }
}

let instance = new MyClass();
instance.prop1 = 12;
instance.prop2 = 42;

let wrongCopy = Object.assign({}, instance);
console.log(wrongCopy.prop1); // 12
console.log(wrongCopy.prop2); // 42
wrongCopy.summonUnicorn() // ERROR : undefined is not a function

let goodCopy = Object.assign(new MyClass(), instance);
console.log(goodCopy.prop1); // 12
console.log(goodCopy.prop2); // 42
goodCopy.summonUnicorn() // It works !

A solução mais simples que encontrei é:

let yourDeepCopiedObject = _.cloneDeep(yourOriginalObject);

* ETAPAS IMPORTANTES: Você deve instalar o lodash para usá-lo (o que não é claro em outras respostas):

$ npm install --save lodash

$ npm install --save @types/lodash

e importe-o no seu arquivo ts:

import * as _ from "lodash";

Como outros já apontaram, usar lodash ou sublinhado é provavelmente a melhor solução. Mas se você não precisar dessas bibliotecas para mais nada, provavelmente poderá usar algo como isto:

  function deepClone(obj) {

    // return value is input is not an Object or Array.
    if (typeof(obj) !== 'object' || obj === null) {
      return obj;    
    }

    let clone;

    if(Array.isArray(obj)) {
      clone = obj.slice();  // unlink Array reference.
    } else {
      clone = Object.assign({}, obj); // Unlink Object reference.
    }

    let keys = Object.keys(clone);

    for (let i=0; i<keys.length; i++) {
      clone[keys[i]] = deepClone(clone[keys[i]]); // recursively unlink reference to nested objects.
    }

    return clone; // return unlinked clone.

  }

Foi o que decidimos fazer.

Eu precisava desse recurso apenas para formar 'modelos' do meu aplicativo (dados de back-end brutos convertidos em objetos). Então, acabei usando uma combinação de Object.create (criar novo objeto a partir do protótipo especificado) e Object.assign (copiar propriedades entre objetos). Precisa lidar com a cópia profunda manualmente. Eu criei uma essência para isso.

Tinha o mesmo problema e não queria usar nenhum plug-in apenas para clonagem profunda:

static deepClone(object): any {
        const cloneObj = (<any>object.constructor());
        const attributes = Object.keys(object);
        for (const attribute of attributes) {
            const property = object[attribute];

            if (typeof property === 'object') {
                cloneObj[attribute] = this.deepClone(property);
            } else {
                cloneObj[attribute] = property;
            }
        }
        return cloneObj;
    }

Créditos: Tornei esta função mais legível . Verifique as exceções à sua funcionalidade abaixo

Eu criei um serviço para usar com o Angular 5 ou superior, ele usa a angular.copy ()base do angularjs, funciona bem para mim. Além disso, existem outras funções como isUndefined, etc. Espero que ajude. Como qualquer otimização, seria bom saber. Saudações

import { Injectable } from '@angular/core';

@Injectable({providedIn: 'root'})
export class AngularService {

  private TYPED_ARRAY_REGEXP = /^\[object (?:Uint8|Uint8Clamped|Uint16|Uint32|Int8|Int16|Int32|Float32|Float64)Array\]$/;
  private stackSource = [];
  private stackDest = [];

  constructor() { }

  public isNumber(value: any): boolean {
    if ( typeof value === 'number' ) { return true; }
    else { return false; }
  }

  public isTypedArray(value: any) {
    return value && this.isNumber(value.length) && this.TYPED_ARRAY_REGEXP.test(toString.call(value));
  }

  public isArrayBuffer(obj: any) {
    return toString.call(obj) === '[object ArrayBuffer]';
  }

  public isUndefined(value: any) {return typeof value === 'undefined'; }

  public isObject(value: any) {  return value !== null && typeof value === 'object'; }

  public isBlankObject(value: any) {
    return value !== null && typeof value === 'object' && !Object.getPrototypeOf(value);
  }

  public isFunction(value: any) { return typeof value === 'function'; }

  public setHashKey(obj: any, h: any) {
    if (h) { obj.$$hashKey = h; }
    else { delete obj.$$hashKey; }
  }

  private isWindow(obj: any) { return obj && obj.window === obj; }

  private isScope(obj: any) { return obj && obj.$evalAsync && obj.$watch; }


  private copyRecurse(source: any, destination: any) {

    const h = destination.$$hashKey;

    if (Array.isArray(source)) {
      for (let i = 0, ii = source.length; i < ii; i++) {
        destination.push(this.copyElement(source[i]));
      }
    } else if (this.isBlankObject(source)) {
      for (const key of Object.keys(source)) {
        destination[key] = this.copyElement(source[key]);
      }
    } else if (source && typeof source.hasOwnProperty === 'function') {
      for (const key of Object.keys(source)) {
        destination[key] = this.copyElement(source[key]);
      }
    } else {
      for (const key of Object.keys(source)) {
        destination[key] = this.copyElement(source[key]);
      }
    }
    this.setHashKey(destination, h);
    return destination;
  }

  private copyElement(source: any) {

    if (!this.isObject(source)) {
      return source;
    }

    const index = this.stackSource.indexOf(source);

    if (index !== -1) {
      return this.stackDest[index];
    }

    if (this.isWindow(source) || this.isScope(source)) {
      throw console.log('Cant copy! Making copies of Window or Scope instances is not supported.');
    }

    let needsRecurse = false;
    let destination = this.copyType(source);

    if (destination === undefined) {
      destination = Array.isArray(source) ? [] : Object.create(Object.getPrototypeOf(source));
      needsRecurse = true;
    }

    this.stackSource.push(source);
    this.stackDest.push(destination);

    return needsRecurse
      ? this.copyRecurse(source, destination)
      : destination;
  }

  private copyType = (source: any) => {

    switch (toString.call(source)) {
      case '[object Int8Array]':
      case '[object Int16Array]':
      case '[object Int32Array]':
      case '[object Float32Array]':
      case '[object Float64Array]':
      case '[object Uint8Array]':
      case '[object Uint8ClampedArray]':
      case '[object Uint16Array]':
      case '[object Uint32Array]':
        return new source.constructor(this.copyElement(source.buffer), source.byteOffset, source.length);

      case '[object ArrayBuffer]':
        if (!source.slice) {
          const copied = new ArrayBuffer(source.byteLength);
          new Uint8Array(copied).set(new Uint8Array(source));
          return copied;
        }
        return source.slice(0);

      case '[object Boolean]':
      case '[object Number]':
      case '[object String]':
      case '[object Date]':
        return new source.constructor(source.valueOf());

      case '[object RegExp]':
        const re = new RegExp(source.source, source.toString().match(/[^\/]*$/)[0]);
        re.lastIndex = source.lastIndex;
        return re;

      case '[object Blob]':
        return new source.constructor([source], {type: source.type});
    }

    if (this.isFunction(source.cloneNode)) {
      return source.cloneNode(true);
    }
  }

  public copy(source: any, destination?: any) {

    if (destination) {
      if (this.isTypedArray(destination) || this.isArrayBuffer(destination)) {
        throw console.log('Cant copy! TypedArray destination cannot be mutated.');
      }
      if (source === destination) {
        throw console.log('Cant copy! Source and destination are identical.');
      }

      if (Array.isArray(destination)) {
        destination.length = 0;
      } else {
        destination.forEach((value: any, key: any) => {
          if (key !== '$$hashKey') {
            delete destination[key];
          }
        });
      }

      this.stackSource.push(source);
      this.stackDest.push(destination);
      return this.copyRecurse(source, destination);
    }

    return this.copyElement(source);
  }
}

Eu e você também enfrentamos um problema do trabalho angular.copy e angular.expect porque eles não copiam o objeto ou criam o objeto sem adicionar algumas dependências. Minha solução foi esta:

  copyFactory = (() ->
    resource = ->
      resource.__super__.constructor.apply this, arguments
      return
    this.extendTo resource
    resource
  ).call(factory)

let newObj = JSON.parse(JSON.stringify(obj))

O JSON.stringify()método converte um objeto ou valor JavaScript em uma sequência JSON

Você pode clonar a matriz como

 this.assignCustomerList = Object.assign([], this.customerList);

E clonar o objeto como

this.assignCustomer = Object.assign({}, this.customer);

Se você ainda não estiver usando o lodash, eu não recomendaria instalá-lo apenas para este método. Sugiro uma biblioteca mais restrita, como o 'clone':

npm install clone