在 Angular 2 应用中，将组件数据展示到用户界面是前端开发的基础环节。本文围绕插值表达式、*ngFor 循环与 *ngIf 条件渲染三种核心模板语法，提供可直接运行的 TypeScript 示例。通过对比不同数据结构的绑定方式，帮助开发者快速判断何时使用简单插值、何时引入结构型指令，从而构建清晰可维护的视图层。

使用插值表达式绑定组件属性

插值表达式是 Angular 模板中最直接的数据绑定方式，语法为 {{ 属性名 }}。Angular 会在变更检测周期中自动读取组件实例的对应属性，并将其值渲染到 DOM 中。

以下示例基于 Angular 2 TypeScript 环境配置。在 app/app.component.ts 中定义组件类与内联模板：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    
{{title}}
    
我喜欢的网站: {{mySite}}
  `
})
export class AppComponent {
  title = "站点列表";
  mySite = '菜鸟教程';
}

模板使用反引号（`）包裹多行字符串，而非单引号。运行后浏览器将显示 title 与 mySite 的实际值。

通过 *ngFor 遍历数组与对象列表

当需要展示集合数据时，可使用结构型指令 *ngFor。该指令会遍历可迭代对象，并为每个元素生成对应的 DOM 节点。注意指令名称前的星号（*）是语法糖，代表 Angular 会在底层创建