angular 插值表达式

转载自 http://www.ngui.cc/news/show-102.html

在 Angular 中，我们可以使用 {{}} 插值语法实现数据绑定。

绑定普通文本

import { Component } from '@angular/core'; 
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
}) 
export class AppComponent  {
  name = 'Angular'; 
}

绑定对象属性

import { Component } from '@angular/core'; 
@Component({ selector: 'my-app',
  template: `
    <h2>大家好，我是{{name}}</h2>
    <p>我来自<strong>{{address.province}}</strong>省,
      <strong>{{address.city}}</strong>市
    </p>
  `,
}) 
export class AppComponent {
  name = 'Semlinker';
  address = {
    province: '福建',
    city: '厦门' }
}

值得一提的是，我们可以使用 Angular 内置的 json 管道，来显示对象信息：

@Component({
  selector: 'my-app',
  template: ` ...
    <p>{{address | json}}</p>
  `,
}) export class AppComponent {
  name = 'Semlinker';
  address = {
    province: '福建',
    city: '厦门' }
}