Copia profonda di oggetti in Angular

Question

AngularJS ha angular.copy() per copiare in profondità oggetti e matrici.

Anche Angular ha qualcosa del genere?

Answer 1

Questa domanda non è un duplicato di How can I use angular.copy in angular 2 perché l'OP sta chiedendo informazioni sugli oggetti di copia profonda. La risposta collegata raccomanda Object.assign() che non esegue una copia profonda.

In realtà, utilizzando Angular2 non limita usare altre librerie come jQuery per la copia profonda gli oggetti con la loro funzione $.clone() o lodash con _.cloneDeep().

Le librerie più comuni hanno le loro digitazioni disponibili tramite gli strumenti CLI typings così anche durante la conversione da TypeScript è possibile utilizzare senza problemi tutto ciò che si desidera.

Vedi anche: What is the most efficient way to deep clone an object in JavaScript?

Answer 2

Un'altra opzione è quella di implementare la propria funzione:

/** 
* 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

È inoltre possibile utilizzare:

JSON.parse(JSON.stringify(Object))

se è sul campo di applicazione, è in ogni componente angolare, direttiva, ecc. ed è anche su ogni ambiente nodo.

A meno che non si disponga di un riferimento circolare, dovrebbe funzionare e dissociare efficacemente il riferimento variabile all'oggetto originale.

Answer 4

È possibile deep copy un oggetto in angolare utilizzando il metodo del cloneDeep lodash:

Installare lodash con yarn add lodash o npm install lodash.

nel componente, importare cloneDeep e utilizzarlo:

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

è solo 18kb aggiunto al vostro costruire, vale la pena per i benefici.

Ho anche scritto un article here, se avete bisogno di maggiori informazioni sul perché usare il cloneDeep di lodash.