How to display a number of images depending on property value

I have this class :

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

and this component :

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

with this template :

<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>

What I would like to do is in the aspects column to display a number of identical small images for each aspect corresponding to it’s value. For example if the deck has

aspectOrder = 3

and

aspectWisdom = 2

there would be 3 “Order” images and 2 “Wisdom” images.
I can use *ngIf to determine if there should be any images at all for each aspect and get the correct image, but I have no idea how to create the specific number of images :

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

and the end result in browser should be something like this :

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

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

You can go this way, <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 : I hope this answer will help you. it displays img according to orders number. If you want <img> tag dyanmically, I think you have to play at Typescript end before you make your bindings to html template.Consider below answer and also check working plunker. I tried to stick to your code but don’t know how relevant it is, <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=… Read more »

Jason
Guest

*ngFor could help? *ngFor with a made-up array of (deck.aspectOrder) items.
Check out the 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);
  }
}