Question

我读过一篇关于属性和属性绑定之间差异的文章。根据我的理解，大多数时候，Angular2更喜欢属性绑定，因为在每次数据更改后，DOM都会更新。（如果我弄错了，请纠正我。）

我有一个自定义组件，并从父组件中使用它。在其中，我有@Input名为truevalue。当我通过属性绑定从父级发起truevalue时，它有时不会改变。我使用了以下代码：

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" [trueValue]="Y"></my-checkbox>

如果我将true或"1"发送到trueValue，则可以使用，但如果我发送"Y"或"YES"，则无效。所以我被迫使用属性绑定。我不知道是什么问题。

我已将其更改为以下内容：

<my-checkbox [(ngModel)]="chkItems" [disabled]="!editMode" trueValue="Y"></my-checkbox>

提前致谢

Answer 1

属性绑定，如

[trueValue]="..."

评估表达式"..."并指定值

"true"评估值true "Y"未知。 TypeScript中没有内部Y值，组件类实例中没有属性，这是模板绑定的范围。在这种情况下，你会想要

[trueValue]="'Y'"

请注意使Y为字符串的其他引号。

普通属性也分配给输入

trueValue="Y"

是纯HTML，没有任何Angular2绑定，属性值总是字符串。因此，这将分配字符串Y。

另一种方法是字符串插值

trueValue="{{true}}"

将赋值"true"（作为字符串），因为将评估带有{{...}}的表达式，然后在传递给输入之前将其转换为字符串。这不能用于绑定除字符串之外的其他值。

显式绑定到属性而不是您可以使用的属性（除trueValue="Y"创建属性但不进行任何评估外）

[attr.trueValue]="'Y'"

或

attr.trueValue="{{'Y'}}"

如果要使用trueValue属性通过CSS选择器来处理元素，则属性绑定很有用。

Answer 2

我从以下句子中了解

首先，我将解释一下 html属性和 dom属性

属性由html定义，而属性由DOM
属性初始化DOM属性。初始化完成属性作业完成后
属性值可以更改，而属性值不能更改

例如

 <input id="idInput" type="text" value="xyz" />

如果我们输入

idInput.getAttribute('value') //attribute value gives xyz

idInput.value  // property value also gives xyz

如果我们将文本框中的输入文本更改为tyz：

idInput.getAttribute('value') // attribute value gives xyz

idInput.value  // property value also gives tyz

现在角度

字符串插值{{name}}

插值是Angular转换为属性绑定的特殊语法
要连接字符串，我们必须使用插值而不是属性绑定
要将元素属性设置为非字符串数据值，必须使用属性绑定

属性绑定[已禁用] =“名称”
这里[disabled]是DOM的一个属性。不是在html中找到的属性disabled。

属性绑定attr.colspan ="{{colspanval}}"
当属性对应的属性不存在时，例如colspan没有相应的dom属性，因此需要属性绑定如果我们尝试使用colspan = "{{cospanval}}" - 属性绑定

错误

Answer 3

将数据值呈现为字符串时，没有技术理由偏好一种形式到另一种形式。

如果我们希望数据值为布尔值或非字符串，那么我们应该选择属性绑定

Answer 4

假设my-checkbox是您的自定义组件选择器，并且您在父组件中使用它。由于您的自定义组件上有trueValue @Input属性，因此要在父组件Y中使用它，必须评估为{1}}，如果为1，则为value相当于真实。）

要使属性绑定起作用，它必须求值为一个值。 “YES”或“Y”只是字符串值，除非您执行以下操作，否则不会对其进行评估：

export class ParentComponent` {
       Y = "YES"; // <--or "Y"
    }

然后在自定义组件中使用trueValue显示interpolation，例如{{trueValue}}

另外需要注意的是，当你使用{{}}插值时，它总是在绑定之前将值转换为.toString()。

Answer 5

从技术上讲，绑定属性有3种方法。

字符串插值 - {{expression}} - 从组件模板中呈现绑定值，并将此表达式转换为字符串。
属性绑定 - [目标] =＆＃34;表达式＆＃34; - 通过从组件到模板呈现值来做同样的事情，但是如果你想绑定除string之外的表达式（例如 - boolean），那么属性Binding是最好的选择。
结合靶=＆＃34;表达＆＃34; - 这不是常规的使用方式。

您始终决定使用适合您用例的选项。

Answer 6

属性绑定（[]）和插值（{{}}），两者都相似，都支持单向数据绑定（从组件到html模板提供数据）。它们之间存在细微差别。我们必须对非字符串数据使用属性绑定。例如

<div [disabled]='isdissabled'>Text</div>

 here is property that is defined inside component.

 isdissabled : boolean=true;(after that change it to false in both scenario it would work as expected)
<div disabled='{{isdissabled}}'>Text</div>

but this scenario would not work as expected(both scenario it would be dissabled).

Answer 7

其他几个人也提到了这一点，但是我认为一个很好的例子对于突出区别是很重要的。假设您有一些绑定如下的单选按钮：

<div *ngFor="let item of results">
  <input type="radio" value="{{item.id}}" name="{{item.id}}" [(ngModel)]="selectedItemId">
</div>

这似乎正常工作，但是如果item.id是数字值而不是字符串，则selectedItemId将被设置为字符串值而不是整数。这可能会在意想不到的地方造成缺陷。例如，当item.id == selectedItemId始终为假时，使用item.id === selectedItemId可能会返回true。

因此，我建议始终在value属性上使用属性绑定是一种好习惯，因为它专门用于存储和绑定到 values ，而不仅仅是更改HTML。

<div *ngFor="let item of results">
  <input type="radio" [value]="item.id" name="{{item.id}}" [(ngModel)]="selectedItemId">
</div>

boolean attributes也一样。请注意，在某些情况下，例如checked和disabled，Angular似乎将内插值视为布尔值，而在其他情况下，例如hidden，则不是。有关示例，请参见this stackblitz。

属性绑定与属性插值

7 个答案: