基于ngFor循环生成带div的动态表答案

【问题标题】：Generate dynamic table with div based on ngFor loop基于ngFor循环生成带div的动态表
【发布时间】：2018-05-20 01:06:13
【问题描述】：

下面的代码是main-category.component的视图

<div>
  <div *ngFor="let category of categories;"> 
      <app-subcategory>
        [name]="category.name">
      </app-subcategory>
  </div>
</div>

我想根据categories 中的项目数生成一个包含 4 列和 x 行的表。每个单元格都包含组件app-subcategory。

我没有看到正确的方法来做到这一点。你有想法吗？

谢谢，

【问题讨论】：

通过 7k 代表，您应该知道需求和问题之间的区别。 你尝试过什么，它到底有什么问题？
您需要提供更多信息。桌子在哪里？如果它在 app-subcategory 中的 div 内，那么您正在创建多个表。你还尝试过什么？
@VinodBhavnani 我更新了这个问题。该代码位于组件“main-category.component”的视图中，我想根据类别中的项目数显示 x 次子组件“app-subcategory”，但逐行显示 4 列。

标签： html angular frontend

【解决方案1】：

@Pipe({ name: columns })
export class ColumnsPipe implements PipeTransform {
  transform(data, numColumns) {
    if(!data || data.length == 0) {
      return data;
    }

    var i,j,temparray,chunk = 10;
    result = [];
    for (i=0,j=data.length; i<j; i+=chunk) {
        result.pop(array.slice(i,i+chunk));
    }
    return result;
  }
}

另见https://stackoverflow.com/a/8495740/217408

<div>
  <div *ngFor="let row of categories | columns:4">
    <div *ngFor="let category of row"> 
      <app-subcategory>
        [name]="category.name">
      </app-subcategory>
    </div>
  </div>
</div>

您可能希望将 div 更改为 <tr> 和 <td> 以获得真实的行和列。

【讨论】：