web-dev-qa-db-fra.com

angular: comment faire une boucle pour les nombres?

J'ai une collection d'éléments, où chaque élément a un attribut rank, qui est un nombre. Je veux faire une boucle sur ce numéro, voici ce que j'ai essayé:

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

Manuscrit:

export class MonthpicksComponent{

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

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

malheureusement, la première boucle ne montre qu’un résultat et la seconde ne montre rien.

angularngfor
5
Mohammad

Vous pouvez utiliser la fonction dans *ngFor pour que la solution ressemble à ceci: 

my.component.ts 

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

my.component.html 

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

Peut-être la solution la plus simple sans code TS:

<div *ngFor="let item of [].constructor(10); let i = index">
   {{i}}
</div>
1
NJoco

Pour votre cas d'utilisation spécifique, vous pouvez utiliser ce code:

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
}

arr prendra la valeur de votre attribut de rang et créera un tableau de cette longueur. Vous pourrez ensuite effectuer une boucle autant de fois que votre valeur le représente.

essayez ce code en espérant qu'il vous sera utile.

1
Mahesh Jadhav

Tu peux faire comme ça 

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

Essaye ça 

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

Le moyen le plus simple est de définir un tableau dans le fichier .ts

i = Array
count : number = 3

Vous pouvez modifier dynamiquement la valeur dans n’importe laquelle de vos fonctions

Dans le modèle, la boucle peut être incluse comme suit

 <div *ngFor="let j of i(count)">
    // Loop content here
 <div>
0
Athul Raj