ngfor显示在多个表行中

Question

我有一个使用Angular显示的python列表。超过200个对象的整个列表将显示在单个表行中。如何让它以多行显示？

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

您可以将*ngFor指令直接放在tr上，以便在每行中重复List个收集数据。

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

Answer 2

如果您知道List总是包含100个项目，那么为什么不将它们分成5个较小的数组，每个20个项目，然后使List = [[1,2 ... 20]，[21 ... 40] ，[41 ... 60] ...]？如果那不是一个选项，那么你可以在Angular中编写自己的自定义管道，完成同样的事情并做

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

Answer 3

你可以这样做。

在组件中创建一个no行的实例变量数组。假设您每行需要20个元素

rows:number[]=[];

在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>

切片是一个有角度的管道。