角度2中的字符串插值及其动态性 [英] string interpolation in angular 2 and it's dynamicity

问题描述

在Angular2中，为什么我将属性放在一个简单的视图中，例如：

 < span> {{ allowServer}}< / span> 
  

只要其.ts文件中的值发生更改，它就会更改，如果我这样说： / p>

 < button class = btn btn-primary Disabled = {{{allowServer}}> server< / button> 
  

按钮没有禁用新值吗？

那么，我必须使用插值法而不是绑定语法的规则是什么？

  [已禁用] = allowServer 
  

解决方案

[prop] = value

用于将对象绑定到属性（Angular组件或指令的@Input（）或DOM元素的属性）。 / p>

prop = {{value}}

将值绑定到属性。 该值是字符串化的（又称插值）

请看下面的示例：

 < button id = button1 Disabled = {{{allowServer}}> server< / button> 
< button id = button2 [disabled] = {{allowallow}}>服务器< / button> 
  

1）allowServer === true

  button1.disabled ='true'//字符串
 
 button2.disabled = true //布尔
  

2）allowServer ===假

  button1.disabled ='false'//字符串因此Disabled是true 
 
 button2.disabled = false //布尔
  

您会看到 button1 将始终被禁用

< a href = https://i.stack.imgur.com/oKaNQ.gif rel = noreferrer>

In Angular2, why if i put a property in a simple view, like this:

<span>{{allowServer}}</span>

it change whenever its value change on its .ts file, and if i put it like this:

<button class="btn btn-primary" disabled={{allowServer}} >server</button>

the button doesn't get the new value disabled?

So, what is the rule for which I have to use interpolation instead of binding syntax?

[disabled]=allowServer 

解决方案

[prop]="value"

is for object binding to properties (@Input() of an Angular component or directive or a property of a DOM element).

prop="{{value}}"

binds a value to a property. The value is stringified (aka interpolation)

See lets look at an example:

<button id="button1" disabled={{allowServer}} >server</button>
<button id="button2" [disabled]={{allowServer}} >server</button>

1) allowServer === true

button1.disabled = 'true' // string

button2.disabled = true   // boolean

2) allowServer === false

button1.disabled = 'false' // string so disabled is true

button2.disabled = false// boolean

As you can see button1 will always be disabled

这篇关于角度2中的字符串插值及其动态性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！