WESEEK Tips wiki

{{pagename}} - {{sitename}}

# 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">
```
- マジックナンバーがテンプレート側に表れないように可読性を意識しましょう