リセット後に角2の入力値が更新されない

Question

ヒーローを追加した後、空の文字列に値をリセットしたいという簡単な入力があります。問題は値が更新されていないことです。どうして？

@Component({ 
    selector: 'my-app', 
    template: ` 
     <input type="text" [value]="name" #heroname /> 
     <button (click)="addHero(heroname.value)">Add Hero!</button> 

     <ul> 
     <li *ngFor="let hero of heroes">   
      {{ hero.name }}   
     </li> 
     </ul> 
    `, 
}) 
export class App { 
    name: string = ''; 
    heroes = []; 

    addHero(name: string) { 
    this.heroes.push({name}); 
    // After this code runs I expected the input to be empty 
    this.name = ''; 
    } 

} 

Answer 1

一方向バインディングを使用しているため、入力に何かを入力すると、nameプロパティは変更されません。それは""のままです。 Add hero!ボタンをクリックしても、それは変更されません。

addHero(name: string) { 
    this.heroes.push({name}); // this.name at this line equals '' 
    this.name = ''; // it doesn't do any effect 
} 

Angular2は、変更された場合のみvalueプロパティを更新します。

あなたnameプロパティが入力した後に変更されることを保証するために@angular/forms

[(ngModel)]="name" 

によって提供される双方向バインディングを使用。

もう一つの方法は、手動でそのではなく、入力のpropertyにattributesに結合しているため、それ値の中に残る結合[value]を使用していたように、角度のhtml attribute vs dom property documentationごとに角度Template binding works with properties and events, not attributes.で

[value]="name" (change)="name = $event.target.value" 

Answer 2

を変更し実施していますそれはthis.name = ""を設定した後です。