在 Angular 中，我们可以使用 {{}} 插值语法实现数据绑定。
新建组件
输出:
数组中
app.module.ts更新后：
创建 UserComponent 组件
@Component({ //Component 装饰器来定义组件的元信息
selector: 'sl-user',template: `
selector: 'sl-user',template: `
大家好，我是{{name}}
我来自
{{address.province}}
省,{{address.city}}
市{{address | json}}
//Angular 内置的 json 管道，来显示对象信息 `,})//定义组件类
export class UserComponent {
name = 'name';
address = { province: 'province',city: 'city' }
}
//使用构造函数初始化数据
export class UserComponent {
name: string;
address: any;
constructor() {
this.name = 'name';
this.address = {
province: 'province',city: 'city'
}
}
}
//接口使用
interface Address {
province: string;
city: string;
}
export class UserComponent {
name: string;
address: Address;
constructor(){
this.name = 'name';
this.address = {
province: 'province', city: 'city'
}
}
}
定义数据接口（ TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。）
let semlinker: Person = {
name: 'semlinker',age: 31
};
name: 'semlinker',age: 31
};
声明 UserComponent 组件
在AppComponent中使用 UserComponent 组件
@Component({
selector: 'my-app',template:
export class AppComponent {}
selector: 'my-app',template:
<sl-user></sl-user> //UserComponent 的 selector ,})export class AppComponent {}
