1. ホーム
  2. angular

[解決済み] ngForで数値を元にHTML要素を複数回繰り返す

2022-05-09 03:32:39

質問

を使用するにはどうすればよいのでしょうか? *ngFor を使用して、HTML 要素を複数回繰り返すことができますか?

例えば、以下のような場合です。 メンバー変数に20を代入している場合。divを20回繰り返すには、*ngForディレクティブをどのように使用すればよいのでしょうか?

どのように解決するのですか?

以下を利用するとよいでしょう。

@Component({
  (...)
  template: `
    <div *ngFor="let i of Arr(num).fill(1)"></div>
  `
})
export class SomeComponent {
  Arr = Array; //Array type captured in a variable
  num:number = 20;
}

またはカスタムパイプを実装する。

import {PipeTransform, Pipe} from '@angular/core';

@Pipe({
  name: 'fill'
})
export class FillPipe implements PipeTransform {
  transform(value) {
    return (new Array(value)).fill(1);
  }
}

@Component({
  (...)
  template: `
    <div *ngFor="let i of num | fill"></div>
  `,
  pipes: [ FillPipe ]
})
export class SomeComponent {
  arr:Array;
  num:number = 20;
}