ngfor 在多个表格行中显示答案

【问题标题】：ngfor to display in multiple table rowsngfor 在多个表格行中显示
【发布时间】：2017-12-22 11:35:35
【问题描述】：

我有一个要使用 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 数据换行到下一行，而不是在同一行中溢出。

【问题讨论】：

@VasudeDeshpande 尝试编辑解决方案。它将为您服务

标签： python html angular html-table

【解决方案1】：

你可以这样做。

在您的组件中创建一个不包含行数的实例变量数组。假设你想要每行 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>

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

【讨论】：

这将创建 100 行
@VasudevDeshpande 尝试编辑解决方案。它将为您服务
让我试试看。感谢您提供分步信息。我是 Angular 新手。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

在这种情况下，我将得到 100 行
@VasudevDeshpande 能否请您重新表述一下您的问题。这很令人困惑。您到底在期待什么？
@VasudevDeshpande 你需要在每行重复 20 个序列吗？？