2017-08-18 5 views
1

EDIT返す添付イベント関数へのパラメータとして要素の値を渡す:さて、私はテンプレートにthis.valueを渡し、ハード、と明らかに私はそれが何をしたいのかやってないことを考えていませんでしたが。私の質問です:角度の要素がそれ自身のプロパティを参照する方法はありますか?this.valueは通常のHTMLでどのように動作するのでしょうか?私は私のOnFrameChanged機能にブレークポイントを配置し、それに渡されるパラメータが定義されていないと判断した未定義

<input 
    mdInput 
    [value] = "this.currentFrameProperties.index ? this.currentFrameProperties.index : 0" 
    (change) = "OnFrameChanged(this.value)" 
> 

は、私は私の角度のプロジェクトで、次の入力変数を持っています。私は混乱していますが、this.valueはinput要素のvalueプロパティを返さないのはなぜですか?ゆがんで何が起こっているの

private OnFrameChanged(frame : number) : void 
{ 
    // At this position, frame is undefined 
    this.webSocketService.send("jump to frame " + frame); 
} 

アイデア:ここ

は私OnFrameChanged()関数ですか?

答えて

1

テンプレートにはバインドしないでください。代わりに、次の操作を行います。

<input 
    mdInput 
    [value] = "currentFrameProperties.index ? currentFrameProperties.index : 0" 
    (change) = "onFrameChanged($event)" 
> 

をして明らかにthisキーワードは、角テンプレートでは動作しませんが、この動作を再現するために、メソッド名

+0

イベントがしかし全体イベントオブジェクトです。私は$ event.target.value、またはそれらの行に沿って何かにバインドする必要がありますか? p.s. camelCase関数については、私の会社の仕様、笑にちょうど従っています。 – LarsMonty

+0

また、 'this'を使用する代わりに、要素が自身または自身のプロパティを参照するためのAngularの方法について知っていますか? (これで明らかになぜそれがうまくいかなかったのかが分かります) – LarsMonty

+0

もしngModelを使用していないのであれば、それはおそらくあなたが使うべきものです。これはtamplatesではないクラスで動作します。 「this」という単語をスキップするだけです。 Angularはとにかくバインディングを行います – Vega

1

をするためにキャメルケースを使用して、私たちは入力要素template reference variableを与えることができます!

これには同様に、テンプレートにこの要素内の値を参照することができます:

<input 
    #frameInputElement 
    mdInput 
    [value] = "this.currentFrameProperties.index ? this.currentFrameProperties.index : 0" 
    (change) = "OnFrameChanged(frameInputElement.value)" 
>