angular 插值表达式

最新推荐文章于 2025-06-10 20:20:54 发布

转载最新推荐文章于 2025-06-10 20:20:54 发布 · 3.5k 阅读

文章标签：

#angular 插值表达式 #angular ui #angular 模板

angular 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了Angular框架中的数据绑定方法，包括基本的文本绑定和对象属性绑定，并展示了如何使用Angular的内置json管道来显示复杂的对象信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自 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: '厦门' }
}