Angular2の[attr.attributeName]と[attributeName]を持つ属性のバインドの相違点

Question

Angular2の新機能です。 iamバインディング属性は、以前は次のようにしていました。

例1：

<input type="number" [max]="variableName"> 

例2：

<select [(ngModel)]="selectedItem"> 
    <option *ngFor="let item of itemList" [value]="item.value" [selected]="selectedItem==item.value">{{item.name}}</option> 
</select> 

いくつかの回失敗して使用されるこれらのバインディング。

次に、attrという接尾辞で属性をバインドするために、次の構文を使用しました。それのための。

例1：

<input type="number" [attr.max]="variableName"> 

例2：

<select [(ngModel)]="selectedItem"> 
     <option *ngFor="let item of itemList" [value]="item.value" [attr.selected]="selectedItem==item.value">{{item.name}}</option> 
    </select> 

魔法のようにいくつかの時間を仕事に使用されるこれらの構文。

これら2つのバインディングの違いを学ぶのを手伝ってください。[attributename]と[attr.attributeName]これらの特定の構文を使用することが重要です。

Answer 1

これは

[selected]="selectedItem==item.value" 

結合性があり、このプロパティと属性の違いのためにもWhat is the difference between attribute and property?

[attr.selected]="selectedItem==item.value" 

参照を結合属性です。

プロパティのバインディングは、要素に実際にその名前のプロパティがある場合にのみ機能します。一部のプロパティは自動的に属性に反映されます。

属性は、その名前の属性をDOM要素に追加するだけです。既知の属性は、要素（および角度コンポーネントの@Input()）によって読み取られます。 カスタム属性はDOMに追加され、要素によって処理されません。