角度顯示按鈕中的正確數組項目

Question

我有一個數組，其中4個項目和儀表板上的4個按鈕。我想爲button1指定item1，用button2指定item2等等。現在，它爲每個「英雄」顯示4個按鈕，總共16個按鈕。我試過{{hero.name[2]}}和類似的東西，但只是抓住字母，而不是實際的數組項目。我將不勝感激任何幫助。

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

Answer 1

您可以使用內置的index屬性*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> 

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