ngForでngForの要素を変更する

Question

英語が正しくない、文法が正しくない場合は、教えてください。

ngFor要素で<li>をクリックしてテキストを変更しようとしましたが、クリックイベントが機能しません。

plunkerを適切な例で作成しました。

• で非同期パイプを削除します。

  また、私は私のコードと、これは私の手順がいたあなたの情報についてはangular.ioルータコースhere

  間の差分をチェックし、行った変更を見ることができますコンポーネント

• 変化ngFor
• 変更英雄変数を取得するには（）プロパティにonSelect
を終了するには、文字列を「クリック」 hero.name累積を変更する方法

@Component({ 
 
    template: ` 
 
    <h2 (click)="test1()">HEROES</h2> 
 
    <ul class="items"> 
 
     <li *ngFor="let hero of heroes " 
 
     [class.selected]="isSelected(hero)" 
 
     (click)="onSelect(hero)"> 
 
     <span class="badge">{{ hero.id }}</span> {{ hero.name }} 
 
     </li> 
 
    </ul> 
 
    ` 
 
}) 
 
export class HeroListComponent implements OnInit { 
 
    
 
    
 
    get heroes() { 
 
    return [ 
 
     new Hero(11, 'Mr. Nice'), 
 
     new Hero(12, 'Narco'), 
 
     new Hero(13, 'Bombasto'), 
 
     new Hero(14, 'Celeritas'), 
 
     new Hero(15, 'Magneta'), 
 
     new Hero(16, 'RubberMan') 
 
    ]; 
 
    } 
 
    
 
    test1(){ 
 
    //alert(1); 
 
    } 
 
    
 
    onSelect(hero: Hero) { 
 
    hero.name += 'click'; 
 
    } 
 

 
}

---

更新が

私はgetPropertyメソッドがngForが実行を繰り返しになるだろうことがわかったとき、私はplunker（plnkr.co/edit/を作成しましたが2016/12/14 bkXYuyLtq5OrPoEQp​​NmC？p =プレビュー）

スケマティックの説明（imageshack.com/i/ponHcO7Vp ）

• ng get property（）オブジェクトを使用する場合、常に新しいオブジェクトを返すため、最大100回取得されます。

• 他のルータからページを再入力すると、最大3回だけ繰り返され、すべてのオブジェクトが再生成されます（console.logから、アキュムレータの再計算からの呼び出しを確認できます）ページの要素のいずれかをクリックしてください）

• がトリガされ、できるようになりますNgFor再セットのデータを、2

までこれをすることができます、プロパティを取得によって引き起こされていませんこのリンク（jsfiddle.net/w31cqzdj/1/）から、ネイティブなjavascriptのforループと、object.definedPropertyの一度だけ電話する

出力（imageshack。COM/I/porsQYHAp）

Answer 1

あなたのコードは問題ありませんが、あなたは新しいヒーロー参照を変更しています。そのため、変化するエフェクトが見えないのです。ヒーローオブジェクトを渡す代わりに、そのオブジェクトの参照を持つようにインデックスを渡す必要があります。 Elemntを取り外し、別の要素のクリックイベントをトリガし、削除された要素がある

export class HeroListComponent implements OnInit { 
    heroes= []; 


    private selectedId: number; 

    constructor(
    private service: HeroService, 
    private route: ActivatedRoute, 
    private router: Router 
) {} 

    ngOnInit() { 
    //this.heroes = this.route.params 
    // .switchMap((params: Params) => { 
    // this.selectedId = +params['id']; 
    // return this.service.getHeroes(); 
    // }); 
    this.loadHeroes(); 
    } 

    loadHeroes() { 

    this.heroes = [ 
     new Hero(11, 'Mr. Nicesss'), 
     new Hero(12, 'Narco'), 
     new Hero(13, 'Bombasto'), 
     new Hero(14, 'Celeritas'), 
     new Hero(15, 'Magneta'), 
     new Hero(16, 'RubberMan') 
    ]; 
    } 

    test1(){ 
    alert(1); 
    } 

    isSelected(hero: Hero) { return hero.id === this.selectedId; } 

    onSelect(index) { 
    //this.router.navigate(['/hero', hero.id]); 
    this.selectedId = this.heroes[index].id; 
    this.heroes[index].name += 'click'; 
    } 
} 

そしてhere'sあなたplunkerのフォークこのバージョン

Answer 2

は次のように変数あなたのヒーローを更新：

heroes: Array<Hero>= [ 
     new Hero(11, 'Mr. Nice'), 
     new Hero(12, 'Narco'), 
     new Hero(13, 'Bombasto'), 
     new Hero(14, 'Celeritas'), 
     new Hero(15, 'Magneta'), 
     new Hero(16, 'RubberMan') 
    ]; 

this is the plunker

ISSUE： 問題は、あなたのtypescriptですアレーのrefrenceとあった、あなたが匿名をしていました初期化と参照がどの変数にも格納されていなかったので、私はヒーローへの割り当てを変更しました：Array<Hero>= [..]