如何根据属性值显示多个图像

Question

我有这个 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;
}

和这个组件：

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

使用此模板：

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

我想做的是在 aspects 列中为对应于它的值的每个 aspect 显示一些相同的小图像。例如，如果牌组有

aspectOrder = 3

和

aspectWisdom = 2

会有 3 张 "Order" 图片和 2 张 "Wisdom" 图片。我可以使用 *ngIf 来确定每个方面是否应该有任何图像并获得正确的图像，但我不知道如何创建特定数量的图像：

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

浏览器中的最终结果应该是这样的：

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

Answer 1

你可以往这边走，

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

更新 :

希望这个回答对您有所帮助。它根据订单号显示img。

如果你想要 <img> 动态标记，我认为你必须在 Typescript 结束时播放，然后才能绑定到 html template.Consider 下面的答案并检查

working plunker.

我试着坚持你的代码，但不知道它有多重要，

<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 有帮助吗？ *ngFor 带有一个由 (deck.aspectOrder) 项组成的数组。查看 this plnkr 中的 app.component.ts。

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

如何根据属性值显示多个图像

How to display a number of images depending on property value

angular2-template

angular

如何根据 属性 值显示多个图像

How to display a number of images depending on property value

angular2-template

angular

如何根据属性值显示多个图像