web-dev-qa-db-ja.com

角度：数値をループする方法は？

アイテムのコレクションがあり、各アイテムにはrank属性（数値）があります。私はこの数をループしたいのですが、ここで私が試したことがあります：

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

TypeScript：

export class MonthpicksComponent{

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

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

ただし、最初のループでは結果が1つしか表示されず、2番目のループでは何も表示されませんでした。

angularngfor
12
Mohammad

*ngFor内で関数を使用できるため、ソリューションは次のようになります。

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>
16
Witold Tkaczyk

たぶん、TSコードなしの最も簡単なソリューション：

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

このようにすることができます

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

特定のユースケースでは、次のコードを使用できます。

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はランク属性値を取り、その長さの配列を作成します。その後、値が表す回数だけ簡単にループできます。

このコードを試してみてください。

1
Mahesh Jadhav

これを試して

<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

最も簡単な方法は、.tsファイルで配列を定義することです

i = Array
count : number = 3

関数の値を動的に変更できます

テンプレートには、次のようにループを含めることができます

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