ngfor在多個表格行中顯示

我有一個使用Angular顯示的python列表。包含超過200個對象的整個列表將顯示在單個表格行中。我怎樣才能讓它顯示在多行？ngfor在多個表格行中顯示

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數據換到下一行，而不是溢出同一行。

@VasudeDeshpande嘗試編輯的解決方案。它將用於你的目的 –

你可以這樣做。

在你的組件中創建一個沒有行的實例變量數組。假設你想每

rows:number[]=[];

排20種元素在constructor或ngOnInit初始化爲

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

現在，在您的模板使用它作爲

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

片是一個角上的管。

2017-07-17 20:04:01

這將創建100行 –

@VasudevDeshpande嘗試編輯的解決方案。它將爲您的目的服務 –

讓我試試吧。感謝您一步一步的信息。我對角度很陌生。 –

您可以將*ngFor指令直接放在tr之上，以便在每行中重複收集數據List。

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

2017-07-17 19:58:16

在這種情況下，我將以100行結束 –

@VasudevDeshpande你能否請你重新說明你的問題..它很混亂......你究竟期待什麼？ –

希望編輯幫助 –

如果你知道列表總是由100個項目組成，那麼爲什麼不把它們分成5個20個項目的小陣列，然後讓List = [[1,2 ... 20]，[21 ... 40 ]，[41 ... 60] ...]？如果這不是一個選項，那麼你可以在Angular中編寫自己的自定義管道，做的事情和做的完全一樣

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

2017-07-17 20:18:32 Rama

回答