2017-02-19 40 views
1

結合我有一個幼稚的問題。說我有像如下定義的輸入元件:理解場所在角2

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

上述實質上意味着現在有一個PROPERTY稱爲ngModel而這又是綁定到model.username輸入元件上定義。迄今爲止都很好。

現在只是爲了學習目的,我進入輸入元素,像這樣:

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> 

技術上,角以名稱匹配到指令輸入,的一個或指令的輸入數組中列出個的屬性名稱的屬性 飾@input()。這些輸入映射到該指令的 自己的屬性。

如果名稱未能與已知指令或元素的屬性相匹配,則 Angular報告「未知指令」錯誤。

所以你的情況的角度通過結合到價值發現NgModel指令與@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

元素事件可能是更常見的目標,但Angular首先查看名稱是否與已知指令的事件屬性相匹配,如下例所示:'https://angular.io/docs/ts/最新/引導/模板syntax.html#!#目標事件 – yurzui

+0

但我知道未知事件綁定不火的錯誤。 '>''會導致錯誤'''''會無誤地工作,因爲它不是一個'unknownEvent'已知財產「input'' – yurzui

0

[(ngModel)]提供two-way data-binding。從數據源

屬性綁定提供one-way data binding以查看目標。屬性綁定的一些示例如下:

<input [disabled]="true"> 
<input [value]="{5 : 'ifSomeCondition()'}" 
<input [attr.type]="{'text' : typeIsText()}"