Question

我已经为Node下载了Angular CLI 6.0.7并且正在使用它，按照教程等进行学习，以便尽可能多地学习。

我有一个问题是数据绑定。看起来我想将组件成员变量的值（例如title）绑定到输入值，我有两个选项：双花括号或方括号。这两种形式：

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

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

这两种方法之间有什么区别，还是只是风格偏好？如果存在功能差异，在哪种情况下首选哪一个？

提前致谢！

编辑据我所知，花括号表示字符串插值，表示字符串，而方括号表示属性绑定，可以使用任何数据类型。但我不明白的是，这两件事在什么时候在功能上有所不同？你什么时候会有一个DOM元素的属性包含一个不等于其字符串化版本的值，你怎么能正确地访问这个属性的值？

Answer 1

它们看起来可能相同，但{{ }}会将输入转换为字符串。但是，如果要输入数字或对象，则必须使用[ ]。

我为同一here

添加了stackblitz表示

Answer 2

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

例如，如果要实现字符串连接，则必须使用插值（例如，{{ }}）。

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

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

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

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

Answer 3

{{}} - 插值：它允许您合并表达式。 Angular 对双花括号中的所有表达式求值，并将表达式结果转换为字符串。

build:
  stage: build
  script:
    - echo "BUILD_VERSION=hello" >> build.env
  artifacts:
    reports:
      dotenv: build.env

deploy:
  stage: deploy
  script:
    - echo "$BUILD_VERSION"  # Output is: 'hello'
  needs:
    - job: build
      artifacts: true

大括号之间的文字也可以是组件属性

 <p>{{ 1+1 }}</p>

[] - 属性绑定： 这是一种单向绑定，因为值从组件传递到模板。它允许您设置视图元素的属性。您可以更新组件中属性的值，然后将其绑定到视图模板中的元素。属性绑定使用 [] 语法进行数据绑定。

 <p>{{ name }}</p>

属性值绑定：方括号与大括号

3 个答案: