angular2: Wie für Zahlen?

Question

Ich habe eine Sammlung von Elementen, wobei jedes Element ein rank Attribut hat, das eine Zahl ist. Ich wan diese Nummer Schleife über, hier ist das, was ich versucht habe:

<div class="col-md-3 col-sm-4 item-container" *ngFor="let item of items"> 
    <div class="item"> 
     <p class="rank"> 
      <img src="" class="img-responsive" *ngFor="let rank of item.rank"/> 
     </p> 
    </div> 
</div> 

Typoskript:

export class MonthpicksComponent{ 

    items: Item[] = []; 
    //... 
} 

export class Item{ 
    id: number; 
    name: string; 
    img: string; 
    desc: string; 
    rank: number; 
    voters: number; 
} 

aber Pech die erste Schleife zeigt nur ein Ergebnis und die zweite Schleife zeigte nichts.

Answer 1

Sie Funktion innerhalb *ngFor verwenden können, so sollte Lösung wie folgt aussehen:

.HTML

<li *ngFor='let in of counter(5) ;let i = index'>{{i}}</li> 

.ts

counter(i: number) { 
    return new Array(i); 
    } 

Answer 2

Versuchen Sie, diese

<div class="col-md-3 col-sm-4 item-container" *ngFor="let item of items"> <div class="item"> <p class="rank"> <img src="" class="img-responsive"/>{{item.rank}} </p> </div> </div> 

Answer 3

Sie können für Ihren speziellen Anwendungsfall

<li *ngFor='let in of [0,1,2,3,4];let i = index'>{{i}}</li> 

Answer 4

wie dies tun können Sie diesen Code verwenden:

HTML:

<div *ngFor="let i of arr(item.rank)"> // arr is declared as Array in our .ts file 
    <img src="" class="img-responsive" 
</div> 

.ts:

export class SomeComponent { 
    arr = Array; // declaring arr as Array 
} 

Der arr wird Ihren Rang-Attributwert übernehmen und ein Array dieser Länge erstellen, und dann können Sie einfach so viele Schleifen erstellen, wie Ihr Wert darstellt.

versuchen Sie diesen Code hoffe, es wird hilfreich sein.