属性绑定与属性插值

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"是未知的.YTypeScript中没有内部值,组件类实例中没有属性,这是模板绑定的范围.在这种情况下,你会想要

[trueValue]="'Y'"

请注意附加引号以Y生成字符串.

普通属性也分配给输入

trueValue="Y"

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

另一种方法是字符串插值

trueValue="{{true}}"

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

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

[attr.trueValue]="'Y'"

要么

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

如果要使用该trueValue属性通过CSS选择器寻址元素,则属性绑定很有用.

Answer 2

我从下面的句子中了解到了

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

1. 属性由html定义,而属性由DOM定义
2. 属性初始化DOM属性.初始化完成属性作业完成后
3. 属性值可以更改,而属性值不能更改

例如

 <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}}

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

Property Binding [disabled] ="name"
这[disabled]是DOM的一个属性.不是disabledhtml中找到的属性.

属性绑定attr.colspan ="{{colspanval}}"
当属性对应的属性不存在时,例如colspan没有相应的dom属性,因此需要属性绑定.如果我们尝试使用- 属性绑定,则会在控制台中引发
错误colspan = "{{cospanval}}"

Answer 3

当将数据值呈现为字符串时，没有技术上的原因更喜欢一种形式。

如果我们希望数据值为布尔值或字符串以外的值，则应该进行属性绑定

Answer 4

其他一些人已经提到了这一点，但我认为一个很好的例子对于突出差异很重要。假设你有一些像这样绑定的单选按钮：

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

这看起来工作正常，但如果item.id是数字值而不是字符串，selectedItemId则会被设置为字符串值而不是整数。这可能会导致意想不到的地方出现缺陷。例如， usingitem.id == selectedItemId可能会返回 true 当item.id === selectedItemId总是为 false 时。

因此，我建议始终对value属性使用属性绑定可能是一个好习惯，因为它专门用于存储和绑定值，而不仅仅是更改 HTML。

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

这同样适用于布尔属性。请注意，在某些情况下，例如checkedand disabled，Angular 似乎将内插值视为布尔值，但在其他情况下，例如hidden，则不会。有关示例，请参阅此堆栈闪电战。

Answer 5

假设my-checkbox是您的自定义组件选择器，并且您在父组件中使用它。由于您在自定义组件上有trueValue属性@Input，为了在父组件中使用它，Y必须评估value它在 1 的情况下所做的事情（相当于 true）。

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

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

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

另一件需要注意的事情是，当您使用{{}}ie 插值时，它总是将值转换为.toString()绑定之前的值。