下面是一个示例代码,演示了如何在Angular中引用模型并显示数据:
user.model.ts
的模型文件,定义一个用户模型:export interface User {
id: number;
name: string;
email: string;
}
import { Component } from '@angular/core';
import { User } from './user.model';
@Component({
selector: 'app-user',
template: `
{{ user.name }}
Email: {{ user.email }}
`
})
export class UserComponent {
user: User = {
id: 1,
name: 'John Doe',
email: 'john.doe@example.com'
};
}
在模板中使用*ngIf
指令来检查user
对象是否存在,并显示用户的名称和电子邮件。
在父组件中引入并使用UserComponent
:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
User Details
`
})
export class AppComponent {}
来显示用户组件。这样,当应用启动时,它将显示一个标题“User Details”,并在下面显示用户的名称和电子邮件。