change - Copia profunda de objetos en Angular

change title angular 4

Question

AngularJS tiene angular.copy() para copiar objetos y matrices en profundidad.

Angular también tiene algo así?

Answer 1

Esta pregunta no es un duplicado de ¿Cómo puedo usar angular.copy en angular 2 porque el OP pregunta por los objetos de copia profunda. La respuesta vinculada recomienda Object.assign() que no hace una copia profunda.

En realidad, el uso de Angular2 no le impide utilizar otras bibliotecas, como jQuery para objetos de copia profunda con su función $.clone() o lodash con _.cloneDeep() .

Las bibliotecas más comunes tienen sus tipificaciones disponibles a través de las herramientas CLI de typings , por lo que incluso al transpilar desde TypeScript puede usar sin problemas todo lo que desee.

También vea: ¿Cuál es la forma más eficiente de clonar profundamente un objeto en JavaScript?

Answer 2

Otra opción es implementar su propia función:

/**
 * Returns a deep copy of the object
 */
public static deepCopy(oldObj: any) {
    var newObj = oldObj;
    if (oldObj && typeof oldObj === "object") {
        newObj = Object.prototype.toString.call(oldObj) === "[object Array]" ? [] : {};
        for (var i in oldObj) {
            newObj[i] = this.deepCopy(oldObj[i]);
        }
    }
    return newObj;
}

Answer 3

Puede deep copy un objeto en Angular utilizando el método cloneDeep de lodash:

Instale lodash con yarn add lodash o npm install lodash .

En tu componente, importa cloneDeep y cloneDeep :

import * as cloneDeep from ''lodash/cloneDeep'';
...
clonedObject = cloneDeep(originalObject);

Solo se agregaron 18kb a su construcción, vale la pena por los beneficios.

También he escrito un artículo aquí , si necesita más información sobre por qué usar cloneDeep de lodash.

Answer 4

Si la fuente es una matriz de objetos , usando el mapa:

let cloned = source.map(x => Object.assign({}, x));

O

let cloned = source.map((x) => { return { ...x }; });

Answer 5

También puedes usar:

JSON.parse(JSON.stringify(Object))

si está en su alcance, está en cada componente angular, directiva, etc. y también está en cada entorno de nodo.

A menos que tenga una referencia circular, debería funcionar y disociará efectivamente su referencia variable al objeto original.