Привязка значения атрибута: квадратные скобки против фигурных скобок

Question

Я скачал Angular CLI 6.0.7 для Node и играю с ним, следуя инструкциям и т. Д., Чтобы узнать как можно больше.

Одна вещь, о которой у меня есть вопрос, - это привязка данных.Кажется, что если бы я хотел связать значение переменной-члена компонента, скажем title, со значением ввода, у меня есть два варианта: двойные фигурные или квадратные скобки.Эти две формы:

<input [value]="title" type="text" />

<input value="{{title}}" type="text" />

Есть ли разница между этими двумя подходами или это всего лишь стилистические предпочтения?Если есть функциональная разница, какая из них предпочтительнее в каких ситуациях?

Заранее спасибо!

РЕДАКТИРОВАТЬ Я понимаю, что фигурные скобки обозначают интерполяцию строки, в результате чего получается строка, в то время как квадратные скобки обозначают привязку свойства, которое может использовать любой тип данных.Но что я не понимаю, так это когда эти две вещи функционально отличаются?Когда бы у вас когда-либо был атрибут атрибута DOM, содержащий значение, которое не эквивалентно его строковой версии, и как бы вы даже правильно обращались к значению такого атрибута?

Answer 1

Они могут показаться одинаковыми, но {{ }} преобразует ввод в строку.Однако, если вы хотите ввести число или объект, вы должны использовать [ ].

Я включил представление стекаблиц для того же здесь

Answer 2

Они оба практически одинаковы.Вы связываете один компонент от компонента к представлению.Однако в некоторых случаях вы должны использовать один поверх другого.

Например, если вы хотите добиться конкатенации строк, вы должны использовать интерполяцию (например, {{ }}).

<img src='baseUrl/{{path}}'/>

Вы не можете достичь выше, используя привязку свойства.

С другой стороны, если вы хотите связать нестроковое значение с элементом HTML, вы должны использовать привязку свойства (например,, [])

<button [disabled]='isDisabled'> My Button </button>