`value =「{{todo.title}}」`和`[value] =「todo.title」`有什麼區別？

Question

我一直在做Angular 2中的待辦事項應用程序以掌握概念... value="{{todo.title}}"和[value]="todo.title"有什麼區別？

Answer 1

從角DOC：

屬性綁定或插？

我們經常在插值和屬性綁定之間做出選擇。以下綁定對執行相同的操作：

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p> 
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p> 

<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p> 
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p> 

插值是許多情況下屬性綁定的一種便捷替代方法。實際上，Angular在渲染視圖之前將這些插值轉換爲相應的屬性綁定。

沒有技術上的理由來選擇其中一種形式。我們傾向於可讀性，這往往有利於插值。我們建議建立編碼風格規則並選擇符合規則的形式，並且對於手頭的任務感覺最自然。

Link

Answer 2

比方說，我們有這個數據

todo = { 
    title: 5 
}; 

1）value="todo.title" - 在屬性 - 與名value和值"todo.title"（串）

2）value="{{todo.title}}"屬性名稱value和值"5"（總是串）

template_parser.ts方法_parseAttr

因此它不會被包括作爲屬性

3）[value]="todo.title" - 與屬性名稱value和值5（數字）

所以這些表達式之間的區別是，在插值（value="{{todo.title}}"）的值總是字符串化而基本屬性的值綁定（[value]="todo.title"）被傳遞原樣。