angular – 属性绑定与属性插值

发布时间：2020-12-17 07:55:31 所属栏目：安全来源：网络整理

导读：我读过一篇关于属性和属性绑定之间差异的文章.根据我的理解,大多数时候,Angular2更喜欢属性绑定, 因为在每次数据更改后,DOM都会更新. (如果我弄错了,请纠正我). 我有一个自定义组件,并从父组件中使用它.在其中,我有一个名为truevalue的@Input.当我通过属性绑

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

我有一个自定义组件,并从父组件中使用它.在其中,我有一个名为truevalue的@Input.当我通过属性绑定从父级启动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>

提前致谢

属性绑定就好

[trueValue]="..."

计算表达式“…”并分配值

“true”计算值true
“Y”未知. TypeScript中没有内部Y值,组件类实例中没有属性,这是模板绑定的范围.
在这种情况下,你会想要

[trueValue]="'Y'"

注意使Y成为字符串的附加引号.

普通属性也分配给输入

trueValue="Y"

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

另一种方法是字符串插值

trueValue="{{true}}"

将赋值“true”(作为字符串),因为带有{{…}}的表达式将被计算,然后在传递给输入之前转换为字符串.
这不能用于绑定除字符串之外的其他值.

要显式绑定到属性而不是您可以使用的属性
(除了trueValue =“Y”,它创建一个属性但不做任何评估)

[attr.trueValue]="'Y'"

要么

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

如果要使用trueValue属性来使用CSS选择器来处理元素,则属性绑定很有用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!