<分区>
我有一个英雄数组，我通过 *ngFor 在列表中显示它，当我单击其中一个元素时，它复制到新变量上，新变量通过双向绑定(bind)进入输入。 我的英雄类:
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>
问题是当我选择一个英雄并在文本输入中显示它的副本并将其更改时，所选列表的英雄也会发生变化。
在 angularjs 1 中，我通过使用 angular.copy() 内置方法来防止这个问题，但在 angular 2 中，我必须创建新的 Hero 并将 selectedHero 的属性归因于主要英雄:
selectedHero: new Hero();
onSelect(hero: Hero): void {
this.selectedHero.name = hero.name;
this.selectedHero.id= hero.id;
}
是否有其他方法可以在不使用 jquery 或 js 函数及以上方法的情况下在 angular 2 中进行深度复制？