2017-02-19 5 views
1

私は素朴な質問があります。角度2のプロパティの結合を理解する

<input [(ngModel)]=model.username name="username" id="username"> 

上記は、基本的に今ngModelと呼ばれる順番にmodel.usernameするためにバインドされた入力要素に定義されたPROPERTYがあることを意味します。私は以下のように定義された入力要素を持っていると言います。これまでのすべての良い。

は今だけの学習目的のために、私はそうのように入力要素にアクセス:

let input = document.getElementbyId('username'); 

をそしてinput.ngModel ...ブームのようなものを検査しようとする...そのようなプロパティはありません!

私はここで行方不明ですか?

答えて

2

ドキュメントhttps://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-target

に係る素子の特性は、より一般的な目標かもしれないが、角度が、それは次の例の あるとして名前が、知られているディレクティブのプロパティであるかどうかを確認するために 最初になります:

<div [ngClass]="classes">[ngClass] binding to the classes property</div> 

技術的には、角度が指令入力、のいずれかに名前を一致さディレクティブのinputs配列にリストされているプロパティ名、または@ Input()で修飾された プロパティです。そのような入力は、ディレクティブの 自身のプロパティにマップされます。

名前が既知のディレクティブまたは要素のプロパティと一致しない場合、 Angularは「不明なディレクティブ」エラーを報告します。あなたのケースではそう

角度@Input('ngModel') model: any;

https://github.com/angular/angular/blob/2.4.8/modules/%40angular/forms/src/directives/ng_model.ts#L112

+0

...同じ概念がイベントバインディングと同じですか? – beNerd

+0

'要素イベントはもっと一般的なターゲットかもしれませんが、次の例のように、名前が既知のディレクティブのイベントプロパティと一致するかどうかを最初に調べます:' https://angular.io/docs/ts/最新の/ guide/template-syntax.html#!#target-event – yurzui

+0

しかし、未知のイベントバインディングはエラーを発生させません。 ''はエラーを引き起こしますが、 '' unknownEvent 'にバインドできません。' '入力'の既知の特性 – yurzui

0

[(ngModel)]NgModelディレクティブは、値に結合することによってtwo-way data-bindingを提供していました。

プロパティバインディングは、データソースからビューターゲットにone-way data bindingを提供します。プロパティバインディングの例を次に示します。

<input [disabled]="true"> 
<input [value]="{5 : 'ifSomeCondition()'}" 
<input [attr.type]="{'text' : typeIsText()}" 
関連する問題