HTMLInputElement：テキストが変更された後に角度イベントハンドラを呼び出す方法

textareaコントロールでユーザーが変更している文字列に対して操作を行う必要があります。HTMLInputElement：テキストが変更された後に角度イベントハンドラを呼び出す方法

問題は、制御が更新される前に2ウェイバインディング[(ngModel)],keypressおよびpasteイベントが発生していることです。余波であり、例えば

、シャア 'が追加されたとき（キーボードを介して、または貼り付け）コンソール出力、見：

、別の「s」を追加関数は現在の結果ではなく前の結果であるをキャッチし、もう1つの 's'は見逃しています。

私は多分、私が何かをしないのです、角度、フロントエンドWeb開発に非常に新しいです（？）
どのように私はその問題を克服することができますか？これはおそらくで順番に起こっている

export class TxtZoneComponent { 
    public LeftText: string = "enter your string" 
    public RightText: string = "enter your string" 

    public c(): void 
    { 
     let inputValue = (document.getElementById("txtLft") as HTMLInputElement).value; 
     console.log("paste and kepress events: " + inputValue); 
     console.log("2 way binding: " + this.LeftText); 
    } 
}

出典

2017-07-29 jonathana

なぜハンドラの値を読み取っていますか？あなたのケースでは、LeftTextという2方向バインドの値を使用してください。 –

@AdrianFaciu 2ウェイバインディングも期待どおりに機能しないため、私のテストの一部でした（画面イメージの 'console.log'で確認できますように） – jonathana

：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 

</head> 
<body> 

    <div class="txtAr txtleft"> 
     <textarea rows="1" class="txt" id="txtLft" [(ngModel)]="LeftText" (keypress)="c()" (paste)="c()"></textarea> 
    </div> 

</body> 
</html>

活字体（テスト）クラス：ここ

は、私のコードの要約部分、 HTMLですイベントは入力コントロール（入力、キー押しなど）によってトリガーされます ngModelとの双方向バインディングはちょうどsynあなたが必要な場合があります

<textarea [value]="LeftText" (input)="c($event.target.value)"></textarea>

そして、イベントハンドラに手動でローカルプロパティに値を代入して処理する他の操作を行います：

c(value: string) { this.LeftText = value; console.log(this.LeftText); // any additional things you want to do }

これを戦術砂糖はあなたが結合特性およびイベントハンドラを分離することができます他のイベントを手動で処理する必要がないため、コードを少しきれいにすることができます。

出典

2017-07-29 10:46:31

ありがとうございました。 – jonathana

HTMLInputElement：テキストが変更された後に角度イベントハンドラを呼び出す方法

答えて

関連する問題