我们在Angular中显示数据比较有代表性的就是讲HTML template 和Angular component的属性相绑定。
在这一章节，我们创建一个有英雄列表的component。每个英雄有一个名字。我们显示英雄名字的列表另外在列表的下方显示英雄的详细信息。
最终的UI是这样的：
在component用内插法显示属性值
最简单的显示component属性的方法是通过内插方式绑定属性名字。用内插法，我们把属性名放进师徒模板中，用两个大括号包围{{myHero}}。
让我们一起建立一个小例子。
创建一个新的文件夹（displaying-data）遵照QuickStat中的步骤。
然后修改app.component.ts文件，改变template和component的内容。当我们完成是，它应该是这样子的：
app/app.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
})
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}我们在以前孔的component中添加了两个属性：title和myHero。
我们修改后的template用两个大括号包围显示component的属性。
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`Angular自动获取component中的title和myHero属性将他们插入浏览器中。当属性变化是，Angular更新视图。
注意我们并没有调用new去创建一个AppComponent类的实例。Angular替我们创建了一个实例。
注意@Component中的selector带有一个特殊的标记叫做”my-app”。记得返回QuickStart中添加<my-app>元素到index.html中
<body>
<my-app>loading...</my-app>
</body>
2031
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
