Angular displaying correct array item in buttons

Question

I have an array with 4 items, and 4 buttons on a dashboard. I want to assign item1 with button1, and item2 with button2 etc. Right now it displays 4 buttons for each "hero" for a total of 16 buttons. I tried {{hero.name[2]}} and similar things but that just grabs letters and not the actual array items. I would appreciate any help.

dashboard.component.html

<h3>Calibrations</h3>
<div class="grid grid-pad">
   <a *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]"> 
    <button style ="min-height: 70px" (click)="gotoClick(1)">{{hero.name}}</button>
    <button style ="min-height: 70px" (click)="gotoClick(2)">{{hero.name}}</button>
    <button style ="min-height: 70px" (click)="gotoClick(3)">{{hero.name}}</button>
    <button style ="min-height: 70px" (click)="gotoClick(4)">{{hero.name}}</button>
  </a>
</div>

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero.class';
import { HeroService } from '../hero.service';
import { StepService } from '../step.service';
@Component({
  moduleId: module.id,
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  heroes: Hero[] = [];

  constructor(private heroService: HeroService, private _stepService: StepService, private _teststepService: StepService) { }

  ngOnInit() {
    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
  }

  private test: number;
  gotoClick(value: number){
    this._stepService.setTest(value);
    this._teststepService.apiURL();
  }
}

hero.service.ts

import { Injectable }    from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Hero } from './hero.class';
import { Observable } from "rxjs/Rx";

@Injectable()
export class HeroService {

  private headers = new Headers({'Content-Type': 'application/json'});
  private heroesUrl = 'api/heroes';  // URL to web api

  constructor(private http: Http){ }

  getHeroes(): Observable<Hero[]> {
    return this.http.get(this.heroesUrl)
               .map(response => response.json().data as Hero[]);
  }

  getHero(id: number): Observable<Hero> {
    const url = `${this.heroesUrl}/${id}`;
    return this.http.get(url)
      .map(response => response.json().data as Hero);
  }
}

eko · Accepted Answer · 2017-05-30 16:37:32Z

2

You can use the built-in index property of *ngFor:

<div class="grid grid-pad">
   <a *ngFor="let hero of heroes; let i = index;" [routerLink]="['/detail', hero.id]"> 
    <button style ="min-height: 70px" (click)="gotoClick(i)">{{hero?.name}</button>
  </a>
</div>

Documentation: https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

answered May 30, 2017 at 16:37

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John Over a year ago

Almost working, only problem is item 1 and item 2 returns id of 1. When click the 4th button it also returns id of 3.

eko Over a year ago

@John index starts from 0, so you can increment it by 1 :-)

John Over a year ago

That should have been obvious, thanks for the help, works great.

Collectives™ on Stack Overflow

Angular displaying correct array item in buttons

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related