Angular 2 Master/Detail nead的解释
问题描述:
我是Angular 2的新手,这是官方网站的代码。我理解所有的类,导入,列表,HTML标签。但我不明白选择(英雄)metod。 * ngFor直播列表ID和名称。如果我们选择列表,则会显示详细信息。该方法如何工作?它抓住了数据,但以什么方式对我不明确。Angular 2 Master/Detail nead的解释
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;
}
}
答
在下面的循环中,我们打算每个槽距离英雄阵列的英雄:
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
所以每个项目将是一个不同的英雄。显示id和名称(分别使用{{hero.id}}
和{{hero.name}}
),但hero
表示整个对象。
所以因为点击行为defind是: (click)="onSelect(hero)"
点击该项目将调用onSelect
法,它代表为参数的英雄。
onSelect
方法将传递给它的英雄作为参数分配给AppComponent
的selectedHero
字段。
在html模板中,您可以看到所选英雄的显示名称被定义为{{selectedHero.name}}
,这意味着它将采用selectedHero
字段中的名称值。
感谢您的解释。我有更多的问题。在该方法中绑定项目并使用selectedHero值显示在其他HTML上,如{{selectedHero.name}}?英雄在(click)=“onSelect(英雄)是来自* NgFor的值?什么是她在onSelect(她:英雄):void { this.selectedHero =她; } 谢谢 –
@StoiljkovićMiloš”她“是onSelect方法参数的名称,onSelect(her:Hero)定义表示'onSelect'方法只有一个参数(名为'her')'Hero'类型。不知道我是否正确理解了问题的其余部分,但Angular2将'AppComponent'中定义的属性绑定到生成的html,所以如果你在你的html模板中使用'{{selectedHero.id}}',然后改变代码中'selectedHero'属性的值,HTML视图应该反应并显示新值。 – kmaczuga