私は* 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でディープコピーする方法はありますか?
私はjs関数を使用したくありません –
他のJSアプリケーションと同じ方法です。一般的なヘルパー機能を提供することは、フレームワークの責任ではありません。事実AngularJSはjQuery APIをエミュレートしようとし、 'copy'と' extend'を考慮に入れるべきではなく、何かが間違っていたことを意味します。 – estus
JavaScriptフレームワークを使用していて、JavaScript関数を使用したくないのですか?何? –