Wie eine Anzahl von Bildern je nach Eigenschaft Wert anzuzeigen

Question

Ich habe diese Klasse:

import {Hero} from "./hero"; 

export class Deck { 
    deckId: number; 
    name: string; 
    description: string; 
    score: number; 
    hero: Hero; 
    aspectOrder: number; 
    aspectWisdom: number; 
    aspectNature: number; 
    aspectRage: number; 
    aspectDominion: number; 
    aspectCorruption: number; 
    date : Date; 
} 

und diese Komponente:

import {Component, OnInit} from 'angular2/core'; 
import {DataService} from "../services/data.service"; 
import {Deck} from '../entities/deck'; 
import {Hero} from '../entities/hero'; 

@Component({ 
    selector: 'all-decks', 
    templateUrl: '/angular/alldecks', 
    styleUrls:['../../css/angular/allDecks.css'] 
}) 
export class AllDecksView implements OnInit { 
    private decks: Deck[]; 
    private deck: Deck; 
    private errorMessage: string; 

    constructor(private dataService: DataService) { 
    } 

    ngOnInit() { 
     this.GetDecks(); 
    } 

    GetDecks() { 
     this.dataService.getAllDecks().subscribe(
      res => this.decks = <Deck[]>res, 
      error => this.errorMessage = <any>error); 
    } 
} 

mit dieser Vorlage:

<all-decks> 
    <div *ngIf="errorMessage" class="danger">{{errorMessage}}</div> 
    <div> 
     <table class="table table-striped table-hover"> 
      <thead> 
      <tr> 
       <th>Deck Name</th> 
       <th>Hero</th> 
       <th>Aspects</th> 
       <th>Rating</th> 
       <th>Updated</th> 
      </tr> 
      </thead> 
      <tbody> 
       <tr *ngFor="#deck of decks"> 
        <td>{{deck.name}}</td> 
        <td> {{deck.hero.name}}</td> 
        <td>TO DO</td> 
        <td>{{deck.score}}</td> 
        <td>{{deck.date}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</all-decks> 

Was ich möchte in der aspects spalte eine anzahl von identischen kleinen bildern für jeden aspekt entsprechend ihrem wert anzeigen. Zum Beispiel, wenn das Deck hat

aspectOrder = 3

und

aspectWisdom = 2

es würde 3 "Order" Bilder und 2 "Weisheit" Bilder. kann ich * ngIf verwenden, um festzustellen, ob es überhaupt keine Bilder für jeden Aspekt sein sollte und das richtige Bild zu bekommen, aber ich habe keine Ahnung, wie die bestimmte Anzahl von Bildern zu erstellen:

<div *ngIf="deck.aspectOrder>0">[must have exactly 3 images here]</div> 

und das Endergebnis in Browser sollte wie folgt sein:

<div> 
    <img src="/img/AspectOrder.png"/> 
    <img src="/img/AspectOrder.png"/> 
    <img src="/img/AspectOrder.png"/> 
</div> 

Answer 1

Sie diesen Weg gehen können,

<td> 
    <div*ngIf="deck.aspectOrder>0">{{deck.aspectOrder}} Order 
     <div> 
       <img src="/img/AspectOrder.png"/> 
       <img src="/img/AspectOrder.png"/> 
       <img src="/img/AspectOrder.png"/> 
     </div> 
    </div> 
</td> 

UPDATE:

Ich hoffe, diese Antwort wird Ihnen helfen. Es zeigt img entsprechend der Bestellnummer an.

Wenn Sie <img> Tag dyanmically wollen, ich glaube, Sie haben an Typescript Ende spielen, bevor Sie Ihre Bindungen zu html template.Consider unten Antwort machen und auch

working plunker überprüfen.

ich Ihren Code zu halten versucht, aber nicht wissen, wie relevant es ist,

<div *ngFor="#deck of decks"> 

     <h4>{{deck.name}}- {{deck.orders}} Orders</h4> 
     <div *ngFor="#a of deck.finalArray"> 
      <img src="/img/AspectOrder.png"/> 
     </div> 

</div> 

---

export class App { 
    decks:Deck[]; 
    constructor(){ 

      this.decks= [ 
       { "deckId": 1, "orders":"3","name":"deck1" }, 
       { "deckId": 2, "orders":"2","name":"deck2" }, 
       { "deckId": 3, "orders":"1","name":"deck3" }, 
       { "deckId": 4, "orders":"0","name":"deck4" } 
      ] 

      // This is what I am doing here by putting some logic 

      this.decks.forEach(item=> { 
       let tempArr=[]; 
       if(item.orders>0) 
       { 
        for (let i=0;i<item.orders;i++) 
        { 
         tempArr.push(''); 
        } 
        item.finalArray=tempArr; 
       } 
      }) 
      console.log(this.decks); 
    } 
} 

Answer 2

* ngFor helfen könnte? * ngFür ein zusammengestelltes Array von (deck.aspectOrder) Elementen. Überprüfen Sie die app.component.ts in this plnkr.

import { Component } from 'angular2/core'; 

@Component({ 
    selector: 'my-app' 
    template: ` 
    <div *ngIf="deck.aspectOrder>0">{{deck.aspectOrder}} orders 
     <div> 
     <div *ngFor="#item of arr; #i=index">order {{i+1}}</div> 
     </div> 
    </div> 

    ` 
}) 
export class AppComponent { 
    deck: {aspectOrder:number} 
    arr: [] 
    ngOnInit() { 
    this.deck = {aspectOrder:3}; 
    this.arr = Array(this.deck.aspectOrder); 
    } 
}