Angular2テンプレートリファレンス変数と動的更新

Question

元々は、テンプレート参照変数をAngular2に設定しようとしていたので、バインディングを行うことなくテーブルの並べ替え順序を逆にすることができましたが、私がチェックボックスをクリックしたときのインターフェース。私は単純なプランカーを作成しました。私のアプリではコードをばらまきている可能性があり、参照の補間値がその場で更新されることはありません。入力した値が変更されるかどうかを確認するためのテキストボックスを作成しました。更新中ではないようです。

この作業を行うためにセットアップで何か不足していますか？あるいは、私は参照変数を使用するために作成されていない方法で使用しようとしていますか？

http://plnkr.co/edit/BK4MzU8KTvEyXDxTNHSR?p=preview

import {Component} from '@angular/core' 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <input #myInput type="text" value="yeh" /> The INPUT value is "{{myInput.value}}" 
    </div> 
    `, 
    directives: [] 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2 (Release Candidate!)' 
    } 
} 

Answer 1

<input #myInput type="text" value="yeh" />を使用すると、等の、しかし、それはそれはcheckedのように、値または他の任意の特性だ角度の時計を意味するものではありません、

をDOM要素へのローカルテンプレートの参照を作成しますngModelまたはngControlを使用してください（別の回答（今すぐ削除される：<input [(ngModel)]="myInput" type="text" value="yeh" />））。

もう1つの解決策は、いくつかの入力イベントにサブスクライブすることによって "視聴"をトリガーすることです。キーアップまたは入力。

<input #myInput type="text" (input)="false" value="yeh" /> {{ myInput.value }} 

とfalseのようないくつかの「イベントハンドラ」または偽のいずれかを使用します。ご覧のとおり、これは本当に変です。避けてください。

デモ：http://plnkr.co/edit/JIwPDPyYFnkDtz99sew3?p=info

Answer 2

この場合に役立ちますthis-

<input #myInput type="text" value="yeh" (keyup)="myInput.value" /> The INPUT value is "{{myInput.value}}" 

を参照してくださいしてください。あなたはより良いあなたがすべき値を監視する必要がある場合は