# ngForで指定回数繰り返す

テンプレートで同じような要素を指定回数分表示させたい時、`ngFor`を使うと思いますが`ngFor`は配列しか指定できないため、`*ngFor="let i of 10;`のような記述はできません。そこで`ngFor`で指定回数繰り返す時に配列を用意する方法について紹介します。

```typescript:example.ts
readonly CONSTANT_NUMBER: number = 10 // 指定回数を定義

/**
 * @param {index}
 * @returns {any[]}
 */
arrayNumberLength(number: number): any[] {
  return [...Array(number)];
}
```

```html:example.html
<div *ngFor="let order of arrayNumberLength(CONSTANT_NUMBER); index as i">
```
- マジックナンバーがテンプレート側に表れないように可読性を意識しましょう

---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/用語集/Javascript/Angular/ngForで指定回数繰り返す
- Permalink: https://tips.weseek.co.jp/5e3fc5c3f5921400485be6d2
- Parent: [Angular](/5e393953e848c600487d6a04.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 1 total
  - [TypeScriptで必要なデータだけ代入して表示](/5e51e4683a1f5c0048d0ac82.md)
- Last updated: 2020-02-09T09:09:57.527Z by deleted_at_1672138060255
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5e3fc5c3f5921400485be6d2