入力内の値は角2でバインディングされていません

Question

私は* ngForを持っています。 forの中には、友人の名前を格納する入力ボックスがあります。私は、ボタンをクリックしたときに友人の更新名の値を保存したいと思いますが、これは期待通りに動作しない：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngFor="let friend of friends"> 
    <input type="text" [value]="friend.name"> 
    <button (click)="save(friend)" type="submit">save</button> 
    </div>`, 
    providers: [] 
}) 
export class App { 
    friends: Friend[] = new Array(new Friend("Alice"), new Friend("Bob")); 

    save(friend: Friend) { 
    console.log(friend.name); 
    } 
} 

export class Friend { 
    constructor(public name: string) {} 
} 

期待は保存方法が友人オブジェクトと呼ばれることになるということです名前の新しい値が含まれています。しかし、それは古い名前を渡すだけです。

Angular2の仕組みに根本的な何かが欠けているような気がします。

Plunkr：http://plnkr.co/edit/blYzEW0JufOcPwIwzoWQ?p=preview

Answer 1

あなたが変更イベントを処理する必要がある - それはfriend.nameを割り当て変更したとき：ngModelと結合

<input type="text" (change)='friend.name=$event.target.value' [value]="friend.name"> 

や設定、双方向データ：

<input type="text" [(ngModel)]="friend.name"> 

を

Demp Plnkr：http://plnkr.co/edit/49tWBSyZAIToreQKyOh6?p=preview