2017-12-17 8 views
1

私は* ngForでリストに表示されるヒーロー配列を持っています。その要素の1つをクリックすると、新しい変数と新しい変数にコピーされます。 私heroClass:JQuery関数を使用せずに角度4でディープコピーする方法は?

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

私のヒーロー・モックリスト:

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

マイヒーローコンポーネント:

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> 

問題があります私が1つを選択するとヒーローとそれのコピーをテキスト入力に表示し、選択されたリストのヒーローも変更します。 angularjs 1で

私はangular.copy()メソッドに建てられたが、角度の2に私はヒーローの新しい作成し、しなければならないを使用してこの問題を防ぐ主人公にselectedHeroのproperyを帰属:

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

jqueryまたはjs関数を使用せずに上記の方法で角度2でディープコピーする方法はありますか?

+0

私はjs関数を使用したくありません –

+1

他のJSアプリケーションと同じ方法です。一般的なヘルパー機能を提供することは、フレームワークの責任ではありません。事実AngularJSはjQuery APIをエミュレートしようとし、 'copy'と' extend'を考慮に入れるべきではなく、何かが間違っていたことを意味します。 – estus

+1

JavaScriptフレームワークを使用していて、JavaScript関数を使用したくないのですか?何? –

答えて

5

これは私の意見ではかなりハッキーですが、動作します。

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

lodash's cloneDeep機能を使用してください。このような機能を提供するために、角度の問題ではありませんので、深いオブジェクトをクローニングするための角度で何もない


関連する問題