1. ホーム
  2. アンギュラー

[解決済み】Angular 2 - NgForは、コレクションの代わりに数字を使用します。

2022-04-02 10:16:59

質問

...例えば...

<div class="month" *ngFor="#item of myCollection; #i = index">
...
</div>

というようなことは可能でしょうか...

<div class="month" *ngFor="#item of 10; #i = index">
...
</div>

...のような非エレガントな解決策に訴えることなく。

<div class="month" *ngFor="#item of ['dummy','dummy','dummy','dummy','dummy',
'dummy','dummy','dummy']; #i = index">
...
</div>

?

解決方法は?

コンポーネント内で、以下のような数値の配列(ES6)を定義することができます。

export class SampleComponent {
  constructor() {
    this.numbers = Array(5).fill().map((x,i)=>i); // [0,1,2,3,4]
    this.numbers = Array(5).fill(4); // [4,4,4,4,4]
  }
}

配列の作成については、こちらのリンクを参照してください。 JavaScript で 1 から 20 までの整数の配列を作成する最も簡単な方法 .

そして、この配列に対して ngFor :

@Component({
  template: `
    <ul>
      <li *ngFor="let number of numbers">{{number}}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}

あるいは、まもなく。

@Component({
  template: `
    <ul>
      <li *ngFor="let number of [0,1,2,3,4]">{{number}}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}