1.创建一个数组数据，这个是模拟数据的。
在app.component.ts文件中，申明一个数组并赋值：
const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: 'Bombasto' }, { id: 14, name: 'Celeritas' }, { id: 15, name: 'Magneta' }, { id: 16, name: 'RubberMan' }, { id: 17, name: 'Dynama' }, { id: 18, name: 'Dr IQ' }, { id: 19, name: 'Magma' }, { id: 20, name: 'Tornado' }];2.上面创建的数组，无法在html中进行绑定，因此，需要将它放入AppComponent类中以便暴露出来。
export class AppComponent { title = 'hello world'; heroes = HEROES;}3.将数组在网页中显示出来，那么需要修改模板为：
template: ` <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> `ngFor的*前缀表示<li>及其子元素组成了一个显示模板。
ngFor指令在AppComponent.heroes属性返回的heroes数组上迭代，并输出此模板的实例。
引号中赋值给ngFor的那段文本表示“从heroes数组中取出每个英雄，存入一个局部的hero变量，并让它在相应的模板实例中可用”。
其实，相当于做出了数组个数的li出来，然后每个li都可以单独设置。
其实，这个时候直接看显示也能看出来，就是很多li并且还带些ul的小圆点。
4.给list添加样式：
这个是在
···
@Component({
selector: 'app-root',
template: <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul>,
styles: [//**注意名称为styles，是个数组，数组中的元素是字符串，目前是一个字符串，表示了所有的样式，上面的模板，注意是有class的** .selected { background-color: #CFD8DC !important; color: white; } .heroes { margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em; } .heroes li { cursor: pointer; position: relative; left: 0; background-color: #EEE; margin: .5em; padding: .3em 0; height: 1.6em; border-radius: 4px; } .heroes li.selected:hover { background-color: #BBD8DC !important; color: white; } .heroes li:hover { color: #607D8B; background-color: #DDD; left: .1em; } .heroes .text { position: relative; top: -3px; } .heroes .badge { display: inline-block; font-size: small; color: white; padding: 0.8em 0.7em 0 0.7em; background-color: #607D8B; line-height: 1em; position: relative; left: -1px; top: -4px; height: 1.8em; margin-right: .8em; border-radius: 4px 0 0 4px; }]
})
···
看出样式什么的，都在设置外部文件的地方。
当我们为一个组件指定样式时，它们的作用域将仅限于该组件。 上面的例子中，这些样式只会作用于AppComponent组件，而不会“泄露”到外部 HTML 中。
5.添加点击事件：
添加点击事件，就是在模板上添加一个click的事件而已，需要修改的只是：
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">圆括号标识<li>元素上的click事件是绑定的目标。 等号右边的onSelect(hero)表达式调用AppComponent的onSelect()方法，并把模板输入变量hero作为参数传进去。
那么在AppComponent中添加事件处理函数：
export class AppComponent { title = 'hello world'; heroes = HEROES; selectedHero: Hero;//这个是给模板用的，就是html中去绑定而已 onSelect(hero: Hero): void {//事件处理函数 this.selectedHero = hero; }6.事件处理完成，但是还没有显示出来，那么需要做的显示。
显示很简单，在模板中添加：
<h2>{{selectedHero.name}} details!</h2> <div><label>id: </label>{{selectedHero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selectedHero.name" placeholder="name"/> </div>这样就可以显示出了。
但是，此时有问题，因为初始化的时候，selectedHero为空，会导致页面出错，啥也不显示。
那么处理这样的情况，就需要如此做了：
<div *ngIf="selectedHero"> <h2>{{selectedHero.name}} details!</h2> <div><label>id: </label>{{selectedHero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selectedHero.name" placeholder="name"/> </div></div>这样就会显示正确的页面了。(别忘记是*nglf而不是nglf。)
当没有选中时，ngIf指令会从 DOM 中移除表示详情的这段 HTML 。 没有了表示详情的元素，也就不用担心绑定问题。
当用户选取了一个，selectedHero变成了“已定义的”值，于是ngIf把详情加回 DOM 中，并计算它所嵌套的各种绑定。
7.在继续美化下界面，目前可以选择了，并且显示了，但是到底是哪个选择上，无法在列表中看出来，那么我们需要如此做：
<li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">在列表的li中添加[class.selected]="hero === selectedHero"，这句话的意思是：如果此时hero与选择上的selectedHero完全相等的话，那么此时让li添加上selected名称的class的修饰。
当表达式(hero === selectedHero)为true时，Angular会添加一个CSS类selected。为false时则会移除selected类。
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。