Wie tief in 4 zu kopieren, ohne JQuery-Funktionen zu verwenden?

Ich habe eine Helden-Array, dass ich es in der Liste von * ngFor zeigen, und wenn ich auf eines der Elemente Element kopiert es auf neue Variable kopiert und neue Variable zur Eingabe durch Tow-Way-Bindung gehen. meine heroClass:Wie tief in 4 zu kopieren, ohne JQuery-Funktionen zu verwenden?

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

mein Held-Mock-Liste:

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' } 
];

Mein Held Komponente:

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>

das Problem ist, wenn ich einen auswähle Held und zeige Kopie davon auf Texteingabe und ändere es den Helden der Liste, die auch geändert wird.

in AngularJS 1 ich von diesem Problem zu vermeiden, indem Sie angular.copy() in Verfahren gebaut, aber in Winkel 2i muß neuen Helden erstellen und Zuordnung propery von selectedHero zu Haupthelden:

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

Gibt es einen anderen Weg, tief in eckig 2 zu kopieren, ohne die Funktion jquery oder js und den obigen Weg zu benutzen?

Quelle

2017-12-17 Aref Zamani

Ich möchte nicht js Funktionen verwenden –

Der gleiche Weg wie in jeder anderen JS-Anwendung. Es liegt nicht in der Verantwortung des Rahmens, allgemeine Hilfsfunktionen bereitzustellen. Die Tatsache, dass AngularJS versucht hat, die jQuery-API zu emulieren und 'copy' und' extend' bereitzustellen, sollte nicht berücksichtigt werden und bedeutet, dass dort etwas schief gelaufen ist. – estus

Sie verwenden ein JavaScript-Framework und möchten keine JavaScript-Funktionen verwenden? Was? –

Das ist meiner Meinung nach ziemlich hacky, aber es funktioniert.

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

Quelle

2017-12-17 07:23:53 Zze

Verwenden Sie lodash's cloneDeep Funktion.

Es gibt nichts in Angular für das tiefe Klonen eines Objekts, da es Angulars Anliegen nicht ist, eine solche Funktion bereitzustellen.

Quelle

2017-12-17 08:19:17

Wie tief in 4 zu kopieren, ohne JQuery-Funktionen zu verwenden?

Antwort

Verwandte Themen