typescript - Hur man gör en djup kopia i Angular 4 utan att använda JQuery-funktioner?

Jag har en hjälte-array som jag visar i en lista med *ngFor och när jag klickar på ett av elementen kopieras det till en ny variabel och den nya variabeln går till input via tvåvägsbindning. min heroClass:

export class Hero {
    id: number;
    name: string;
  }

min hjälte-sarkasm lista:

import { Hero } from './heroClass';

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

Min hero-komponent:

   import { Component, OnInit } from '@angular/core';
    import { Hero } from '../hero';
    import { HEROES } from '../mock-heroes';

    @Component({
      selector: 'app-heroes',
      templateUrl: './heroes.component.html',
      styleUrls: ['./heroes.component.css']
    })
    export class HeroesComponent implements OnInit {

      heroes = HEROES;

      selectedHero: Hero;


      constructor() { }

      ngOnInit() {
      }

      onSelect(hero: Hero): void {
        this.selectedHero = hero;
      }
    }

heroes.component.html

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<div *ngIf="selectedHero">

  <h2>{{ selectedHero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
  </div>

</div>

Problemet är när jag väljer en hjälte och visar en kopia av den i textinmatningen och ändrar den, ändras också hjälten i listan som är vald.

I AngularJS 1 förhindrar jag detta problem genom att använda den inbyggda metoden angular.copy(), men i Angular 2 måste jag skapa en ny Hero och tilldela egenskapen från selectedHero till huvud-Hero:

  selectedHero: new Hero();
onSelect(hero: Hero): void {
        this.selectedHero.name = hero.name;
         this.selectedHero.id= hero.id;
      }

Finns det något annat sätt att göra en djupkopiering i Angular 2 utan att använda jQuery eller JavaScript-funktion och ovanstående sätt?

Svar #1

Det här är ganska hackigt enligt min åsikt, men det fungerar.

this.selectedHero = JSON.parse(JSON.stringify(hero));

För ytlig kopia: Du kan använda spridningsoperatorn:

this.selectedHero = {...hero};
let {...example} = hero;

Svar #2

Använd lodashes cloneDeep-funktion.

Det finns inget i Angular för att djupt klona ett objekt eftersom det inte är Angulards uppgift att tillhandahålla en sådan funktion.

Relaterade artiklar