*Goal: *
1) Display a list (data pulled from service)
2) "Load Additional Info" button exists on each item in the list. Clicking
it will load additional data from a server directly
*Here is the HTML for <herolist>:*
<ul class="heroes">
<li *ngFor="#hero of heroes">
{{hero.ID}}-{{hero.Name}}
<div><a class='link' (click)="GetHero(hero)">Load Additional Hero
Info</a></div>
<hero [hero]="selectedHero"></hero>
</li>
</ul>
*Here is the HTML for <hero>:*
<div *ngIf="hero">
<div>ID:<input [(ngModel)]="hero.ID" type="text" /></div>
<div>Name:<input [(ngModel)]="hero.Name" type="text" /></div>
<div>Power Level:<input [(ngModel)]="hero.PowerLevel" type="text" /></div>
<div><a class='link' (click)="GetHeroDetails()">Load Hero Details</a></div>
<div><herodetails [heroDetails]="heroDetails"></herodetails></div>
</div>
*Here is the Hero List Component:*
@Component({
selector: 'herolist',
providers: [
HTTP_PROVIDERS,
HeroService
],
templateUrl: 'views/HeroList.html',
directives: [HeroComponent],
})
export class HeroListComponent implements OnInit {
constructor(private _heroService: HeroService) { }
heroes: Hero[];
selectedHero: Hero;
ngOnInit() {
this.GetAllHeroes();
}
GetHero(hero: Hero) {
this._heroService.getHero(hero.ID)
.subscribe(res => this.selectedHero = res);
}
GetAllHeroes() {
this._heroService.getAllHeroes()
.subscribe(res => this.heroes = res);
}
}
The problem is that when ever I click "Load Additional Hero Info", it loads
the data from the server and then sets it for every item in the list, not
just the one I want to set. What am I doing wrong here? Any help would be
appreciated.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
