2016-03-21 2 views
26

AngularJS ha angular.copy() per copiare in profondità oggetti e matrici.Copia profonda di oggetti in Angular

Anche Angular ha qualcosa del genere?

+5

Possibile duplicato di [Come posso usare angular.copy in angular 2] (http://stackoverflow.com/questions/34688517/how-can-i-use-angular-copy-in-angular-2) –

+0

'Duplica 'forse, ma volevo una soluzione' non-polyfill'. proprio come 'angular.copy()' –

+0

Questo è tutto ciò che abbiamo. –

risposta

12

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?

16

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; 
} 
+1

Non riesco a copiare in profondità le date usando questo metodo –

7

È 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.

+0

Sembra una copia profonda molto semplice ed efficace! Perché non sta segnando un punteggio più alto? C'è qualcosa di sbagliato in questa risposta? – TSG

+0

Per una soluzione di copia profonda che rimuoverà tutti i riferimenti questo è il metodo migliore, disponibile su Browser/CommonJS, ecc. Lo uso in produzione quando è necessaria un'istantanea dell'oggetto. Credo di essere arrivato per rispondere un po 'in ritardo, come 1 anno di ritardo. @TSG –

+0

Inoltre, se stai usando un oggetto letterale con funzioni su di esso (non solo valori), saranno esclusi, ma puoi facilmente combinare 'Oggetto.assing ({}, oldObject, JSON.parse (JSON.stringify (oldObject))) 'e questo ripopolare le proprietà della funzione dal tuo oggetto letterale e con JSON creerà una copia profonda senza alcuna relazione con l'originale. –

0

È 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.

Problemi correlati