イオン2 - タイプエラーにプロパティがありません

Question

私はイオン2で何かを開発しており、簡単なことに固執しています。

テキストを入力したい場所とテキストを表示する場所があります。私はthisウェブサイトからこのコードを使用して少し修正しました。

シンプルなHTML/JSプログラムで動作します。私はそれが私のイオンプロジェクトでTypescriptも使うという事実と関係があると思う。

HMTL：

<p>This is a <b id='TextToChange'>Test</b> </p> 
<input type='text' id='userInput' value='Enter Text' /> 
<input type='button' (click)='changeText()' value='Change Text' /> 

JS /のTS：

changeText() { 
var userInput = document.getElementById('userInput').value; 
document.getElementById('TextToChange').innerHTML = userInput; 
} 

その後、私は（下のスクリーンショットを参照）Visual Studioでエラーが発生します。私は、これにコードを変更：

var userInput = document.getElementById('userInput').nodeValue; 

をVSで、私はもうエラーを得ることはありませんが、私はボタンを押した場合、それは元の値が消えることができますし、空白のままにして、プログラムが値を取得しません。 このエラーログはありません。

アイデアはありますか？

Answer 1

私は解決策になりました。

HTML：

<p id='TextToChange'>{{value}}</p> 
<input #box (keyup.enter)="changeText(box.value)"> 
<input type='button' (click)='changeText(box.value)' value='Change Text' /> 

注：お使いのエクスポートクラスの下に以下を追加します！ JSの/のTS：

value = ''; 
changeText(value: string) { this.value = value; } 

あなたは、Enterキーを押しますするか、またはテキストを表示するためのボタンを押すことができます。

Answer 2

用途：

var userInput = document.getElementById('userInput').innerText; 

警告：は、私は強くAngular 2 Data bindingに関するドキュメントを読むことをお勧めします。

「バインディング構文」セクションの下で、角度2を使用してこれがどのように行われているかの例を見ることができます。これは、イオン2にも当てはまります。