I guess what you want is
<div><a class='link' (click)="herodetails.GetHeroDetails()">Load
Hero Details</a></div>
<div><herodetails #herodetails
[heroDetails]="heroDetails"></herodetails></div>
I added a #herodetails template variable to the <herodetails #herodetails
...> element and use it in (click)="herodetails.GetHeroDetails()" to
reference the .GetHeroDetails() in the herodetails component instead of the
HeroListComponent (which would be default).
On Friday, February 19, 2016 at 11:38:30 PM UTC+1, Brian Lee wrote:
>
> *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.
