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

    selector: 'all-decks',
    templateUrl: '/angular/alldecks',
export class AllDecksView implements OnInit {
    private decks: Deck[];
    private deck: Deck;
    private errorMessage: string;

    constructor(private dataService: DataService) {

    ngOnInit() {

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

with this template :

    <div *ngIf="errorMessage" class="danger">{{errorMessage}}</div>
        <table class="table table-striped table-hover">
                <th>Deck Name</th>
                <tr *ngFor="#deck of decks">
                    <td> {{}}</td>
                    <td>TO DO</td>

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


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 :

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

Leave a Reply

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

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


*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';

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

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