ngforを複数の表の行に表示する

Question

私は、Angularを使用して表示するPythonリストを持っています。 200以上のオブジェクトのリスト全体が1つのテーブル行に表示されています。どうやって複数の行に表示させることができますか？

List=[1,2,3,4,5, .......100} 

マイHTML：

<table> 
    <tr> 
    <ng-container *ngFor="let item of List"> 
    <td> 
     {{item}} 
    </td> 
    </ng-container> 
</tr> 
</table> 

電流出力：

1,2,3,4,5, ........100 

必要があります。

1,2,3,4,......20 
21,22,........40 
41............60 
61............80 
81...........100 

私は次の行に折り返すとで溢れないように、TDのデータを必要とします同じ行。

Answer 1

このようなことができます。

コンポーネントで、行数のないインスタンス変数配列を1つ作成します。スライスは角提供パイプである

<table> 
    <tr *ngFor="let row of rows"> 
     <td *ngFor="let item of items|slice:row*20:row*20+20"> {{item}} </td> 
    </tr> 
</table> 

としてそれを使用するあなたのテンプレットに今、あなたは、行ごとに20個の要素

constructorでまたは ngOnInitで

rows:number[]=[]; 

が

this.rows= Array.from(Array(Math.ceil(List.length/20)).keys()); 

として、それを初期化したいとします。

Answer 2

trのすぐ上に*ngForディレクティブを配置して、各行にListのコレクションデータを繰り返すことができます。

<table> 
    <tr *ngFor="let item of List"> 
    <td> 
     {{item}} 
    </td> 
    </tr> 
</table> 

Answer 3

リストが100個のアイテムで構成されていることが分かっている場合は、それぞれを20個の小さなアイテムからなる5個の小さな配列に分割し、List = [[1,2 ... 20]、[21 ... 40 ]、[41 ... 60] ...]？オプションでない場合は、まったく同じことを行うAngularで独自のカスタムパイプを記述することができます。

<tr *ngFor="let item of List | yourpipe">