Question

我有这堂课：

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>

我想要做的是在方面列中显示与其对应的每个方面的许多相同的小图像。例如，如果牌组

aspectOrder = 3

和

aspectWisdom = 2

会有3＆＃34;订单＆＃34;图像和2＆＃34;智慧＆＃34;图片。我可以使用* 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模板。请在下面回答并检查

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

如何根据属性值

2 个答案: