代码之家 › 专栏 › 技术社区 › IceMetalPunk

属性值绑定:方括号与花括号

attributes syntax data-binding angular

3

IceMetalPunk · 技术社区 · 7 年前

我已经为node下载了angular cli 6.0.7,并正在使用它、遵循教程等尽可能多地学习。

我有一个问题是数据绑定。如果我想绑定组件成员变量的值,比如 title ,对于输入的值,我有两个选项:双大括号或方括号。这两种形式:

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

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

这两种方法有什么区别吗?还是都只是文体偏好?如果有功能上的差异,在哪些情况下,哪一个是首选的?

提前谢谢!

编辑我知道,花括号表示字符串插值,结果是字符串,而方括号表示属性绑定,可以使用任何数据类型。但我不明白的是这两件事在功能上什么时候不同了?什么时候dom元素的属性包含的值不等于它的stringified版本,以及如何正确地访问这样一个属性的值?

2 回复 | 直到 7 年前

1

5

Divneet 7 年前

它们看起来是一样的,但是, {{ }} 将输入转换为字符串。但是,如果要输入数字或对象,则必须使用 [ ] 。

我也包括了一个stackblitz表示 here

2

0

AD8 7 年前

它们实际上是一样的。您是从组件到视图的单向绑定。但是,在某些情况下,必须使用一个而不是另一个。

例如,如果要实现字符串连接,则必须使用插值(例如, {{ }} )

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

使用属性绑定无法实现上述目的。

另一方面,当您想将非字符串值绑定到HTML元素时,必须使用属性绑定(例如, [] )

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