插值

插值#

文本绑定#

<p>Message: {{ msg }}</p>

<p [innerHTML]="msg"></p>

属性绑定#

<!-- 写法一 -->
<img src="{{ heroImageUrl }}">

<!-- 写法二，推荐 -->
<img [src]="heroImageUrl">

<!-- 写法三 -->
<img bind-src="heroImageUrl">

在布尔特性的情况下，它们的存在即暗示为 true，属性绑定工作起来略有不同，在这个例子中：

<button [disabled]="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。

使用 JavaScript 表达式#

<p>1 + 1 = {{ 1 + 1 }}</p>
<p>{{ num + 1 }}</p>
<p>{{ isDone ? '完了' : '没完' }}</p>
<p>{{ title.split('').reverse().join('') }}</p>

<p [title]="title.split('').reverse().join('')">{{ title }}</p>

<ul>
  <li [id]="'list-' + t.id" *ngFor="let t of todos">
    {{ t.title }}
  </li>
</ul>

编写模板表达式所用的语言看起来很像 JavaScript。 很多 JavaScript 表达式也是合法的模板表达式，但不是全部。

Angular 遵循轻逻辑的设计思路，所以在模板引擎中不能编写非常复杂的 JavaScript 表达式，这里有一些约定：

• 赋值 (=, +=, -=, ...)

• new 运算符

• 使用 ; 或 , 的链式表达式

• 自增或自减操作符 (++和--)