Angular 2 Master/Detail 详细说明

Question

我是 Angular 2 的新手，这是来自官方网站的代码。我了解所有的 class、import、list、HTML 标签。但我不明白 onSelect(hero) 方法。 *ngFor 指令列表 id 和名称。如果我们选择列表，则会显示详细信息。该方法如何工作？它抓取数据，但我不清楚以什么方式。

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

export class Hero {
  id: number;
  name: string;
}

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' }
];

@Component({



selector: 'my-app',

template:`

<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>
<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>


 `,


styles: [`
.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;
}


 `]

})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;

  onSelect(her: Hero): void {
    this.selectedHero = her;
  }
}

Answer 1

在以下循环中，我们将遍历 HEROES 数组中的每个英雄：

<li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

所以每个列表项将代表一个不同的英雄。显示 id 和 name（分别使用 {{hero.id}} 和 {{hero.name}}），但 hero 代表整个对象。

所以因为点击行为被定义为： (click)="onSelect(hero)" 单击该项目将调用 onSelect 方法，并将其表示的英雄作为参数。

onSelect 方法将作为参数传入其中的英雄分配给AppComponent 的selectedHero 字段。

在 html 模板中，您可以看到所选英雄的显示名称定义为 {{selectedHero.name}}，这意味着它从 selectedHero 字段中获取名称值。