属性绑定与属性插值

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

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

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

如果我发送true or "1" into trueValue它有效，但如果我发送"Y" or "YES"， 这是行不通的。所以我被迫使用属性绑定。我不知道出了什么问题。

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

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

提前致谢

属性绑定就像

[trueValue]="..."

计算表达式"..."并赋值

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

[trueValue]="'Y'"

请注意要添加的附加引号Y一个字符串。

普通属性也分配给输入

trueValue="Y"

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

另一种方法是字符串插值

trueValue="{{true}}"

将分配该值"true"（作为字符串）因为其中的表达式{{...}}将被评估，然后在传递到输入之前转换为字符串。 这不能用于绑定字符串以外的其他值。

要显式绑定到属性而不是属性，您可以使用 （除了trueValue="Y"它创建一个属性但不进行任何评估）

[attr.trueValue]="'Y'"

or

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

如果您想使用，属性绑定会很有帮助trueValue属性来使用 CSS 选择器来寻址元素。