Qual è l’alternativa a angular.copy in Angular

Come posso copiare un object e perdere il suo riferimento in Angular?

Con AngularJS, posso usare angular.copy(object) , ma sto ricevendo qualche errore usando quello in Angular.

ECCEZIONE: ReferenceError: angular non è definito

Supponendo che si stia utilizzando ES6, è ansible utilizzare var copy = Object.assign({}, original) . Funziona con i browser moderni; se hai bisogno di supportare i browser più vecchi, dai un’occhiata a questo polyfill

aggiornare:

Con TypeScript 2.1+ è disponibile la notazione di stenografia degli oggetti stenografici ES6:

 const copy = { ...original } 

Fino a quando avremo una soluzione migliore, puoi usare quanto segue:

 duplicateObject =  JSON.parse(JSON.stringify(originalObject)); 

EDIT: chiarimento

Nota: la soluzione di cui sopra era pensata solo per essere una fodera a fissaggio rapido, fornita in un momento in cui Angular 2 era in sviluppo attivo. La mia speranza era che alla fine avremmo potuto ottenere un equivalente di angular.copy() . Quindi non volevo scrivere o importare una libreria di deep-cloning.

Questo metodo ha anche problemi con le proprietà della data di analisi (diventerà una stringa).

Si prega di non utilizzare questo metodo nelle app di produzione . Usalo solo nei tuoi progetti sperimentali – quelli che stai facendo per l’apprendimento di Angular 2.

Utilizzare lodash come indicato in bertandg. La ragione per cui l’angular non ha più questo metodo, è perché l’angular 1 era una struttura autonoma e le librerie esterne spesso correvano in problemi con il contesto di esecuzione angular. Angular 2 non ha questo problema, quindi usa qualunque libreria tu voglia.

https://lodash.com/docs#cloneDeep

Per la copia superficiale potresti usare Object.assign, una funzione ES6

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

NON usarlo per la clonazione profonda

Se vuoi copiare un’istanza di class, puoi usare anche Object.assign, ma devi passare una nuova istanza come primo parametro (invece di {}):

 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 ! 

L’alternativa per la copia profonda di oggetti con oggetti nidificati all’interno è usando il metodo cloneDeep di lodash.

Per Angular, puoi farlo in questo modo:

Installare lodash con yarn add lodash o npm install lodash .

Nel tuo componente, importa cloneDeep e cloneDeep :

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

È solo 18kb aggiunto alla tua build, vale la pena per i benefici.

Ho anche scritto un articolo qui , se hai bisogno di maggiori informazioni sul perché usare il cloneDeep di lodash.

Come altri hanno già sottolineato, l’uso di lodash o underscore è probabilmente la soluzione migliore. Ma se non hai bisogno di quelle librerie per qualcos’altro, puoi probabilmente usare qualcosa del genere:

  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 

Questo è quello che abbiamo deciso di fare.

La soluzione più semplice che ho trovato è:

 let yourDeepCopiedObject = _.cloneDeep(yourOriginalObject); 

* FASI IMPORTANTI: devi installare lodash per usare questo (che non è chiaro da altre risposte):

 $ npm install --save lodash $ npm install --save @types/lodash 

e quindi importalo nel tuo file ts:

 import * as _ from "lodash"; 

Avevo bisogno di questa funzione per formare i miei modelli di app (dati grezzi di backend convertiti in oggetti). Così ho finito per usare una combinazione di Object.create (creare un nuovo object dal prototipo specificato) e Object.assign (copiare le proprietà tra gli oggetti). È necessario gestire manualmente la copia profonda. Ho creato un succo per questo.