Блог

Я делал приложение todo в Angular 2, чтобы понять концепции… В чем разница между value="{{todo.title}}" и [value]="todo.title" ?

Из Angular 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 преобразует эти интерполяции в соответствующие привязки свойств перед отображением представления.

Нет никаких технических причин предпочитать одну форму другой. Мы склоняемся к удобочитаемости, что способствует интерполяции. Мы предлагаем установить правила стиля кодирования и выбрать форму, которая соответствует правилам и наиболее естественна для поставленной задачи.

Ссылка

Допустим, у нас есть эти данные

 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" ) передается как есть.