Angular 角度2主/细节nead说明

我是Angular 2的新手，这是官方网站的代码。我理解所有的类、导入、列表、HTML标记。但我不明白我的意思*用于directiv列表id和名称的NGF。如果我们选择了列表，则会显示详细信息。该方法是如何工作的？它获取数据，但我不清楚它以什么方式获取数据

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',

模板：

`

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

{{title}
我的英雄


{{hero.id}{{hero.name}


{{selectedHero.name}}详细信息！
id:{{selectedHero.id}
姓名：
`,
风格：[`
.选定{
背景色：#CFD8DC！重要；
颜色：白色；
}
.英雄{
边际：0.02米0；
列表样式类型：无；
填充：0；
宽度：15em；
}
李先生{
光标：指针；
位置：相对位置；
左：0；
背景色：#EEE；
边缘：.5em；
填充：.3em0；
高度：1.6em；
边界半径：4px；
}
.李英雄.选定：悬停{
背景色：#BBD8DC！重要；
颜色：白色；
}
.英雄李：悬停{
颜色：#607D8B；
背景色：#DDD；
左：1米；
}
.英雄.文本{
位置：相对位置；
顶部：-3px；
}
.英雄.徽章{
显示：内联块；
字体大小：小；
颜色：白色；
填充：0.8em 0.7em 0.7em；
背景色：#607D8B；
线高：1米；
位置：相对位置；
左：-1px；
顶部：-4px；
高度：1.8em；
右边距：.8em；
边界半径：4px 0 0 4px；
}
`]
})
导出类AppComponent{
标题=‘英雄之旅’；
英雄=英雄；
选择英雄：英雄；
onSelect（她：英雄）：无效{
this.selectedHero=她；
}
}

在下面的循环中，我们将遍历英雄阵列中的每个英雄：

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

{{hero.id}{{hero.name}

因此，每个列表项将代表不同的英雄。显示id和名称（分别使用

{{hero.id}

和

{{hero.name}}

），但

hero

表示整个对象

因此，由于点击行为定义为：

（单击）=“onSelect（hero）”

单击该项将调用

onSelect

方法，其中hero表示为参数

onSelect

方法将作为参数传入的hero分配给

AppComponent

的

selectedHero

字段

---

在html模板中，您可以看到所选英雄的显示名称被定义为

{{selectedHero.name}

，这意味着它从

selectedHero

字段中获取名称值。

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

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

{{hero.id}{{hero.name}

因此，每个列表项将代表不同的英雄。显示id和名称（分别使用

{{hero.id}

和

{{hero.name}}

），但

hero

表示整个对象

因此，由于点击行为定义为：

（单击）=“onSelect（hero）”

单击该项将调用

onSelect

方法，其中hero表示为参数

onSelect

方法将作为参数传入的hero分配给

AppComponent

的

selectedHero

字段

---

在html模板中，您可以看到所选英雄的显示名称被定义为

{{selectedHero.name}

，这意味着它从

selectedHero

字段中获取名称值。

感谢您的解释。我还有一个问题。在方法中是绑定项，并在其他HTML上显示selectedHero值，如{{selectedHero.name}？（点击）=“onSelect（hero）中的hero是*NgFor中的值？onSelect（her:hero）中的“her”是什么：void{this.selectedHero=her；}谢谢。@StoiljkovićMilošThe“her”是

onSelect

方法的参数名。

onSelect（her:hero）

definition意味着

onSelect

方法采用

Hero

类型的单个参数（名为

her

）。我不确定我是否正确理解了问题的其余部分，但Angular2将

AppComponent

中定义的属性绑定到生成的html。因此，如果使用

{selectedHero.id}}

在您的html模板中，然后更改代码中的

selectedHero

属性的值，html视图将做出反应并显示新值。感谢您的解释。我还有一个问题。在方法中，绑定项并显示在具有selectedHero值的其他html上，如{{selectedHero.name}？hero in（单击）=“onSelect”（hero）是*NgFor的值吗？onSelect（her:hero）中的“她”是什么？void{this.selectedHero=her；}谢谢。@StoiljkovićMilošThe“her”是

onSelect

方法的参数名。

onSelect（her:hero）

定义意味着

onSelect

方法采用单个参数（名为

her

）的

Hero

类型。我不确定是否正确理解了问题的其余部分，但Angular2将

AppComponent

中定义的属性绑定到生成的html。因此，如果使用

{selectedHero.id}

在html模板中，然后更改代码中的

selectedHero

属性的值，html视图应作出反应并显示新值。