Html 基于ngFor循环的div动态表生成

下面的代码位于main-category.component视图中

我想根据类别中项目的数量生成一个包含4列和x行的表。每个单元格都包含组件应用程序子类别

我看不出正确的方法。你知道吗

谢谢

@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;
  }
}

另见

---

您可能希望将div改为和，以获得真正的行和列。

通过7k rep，您应该知道需求和问题之间的区别。你试过什么，到底有什么问题？你需要提供更多的信息。桌子在哪里？如果它位于“应用程序内的div”子类别内，则您正在创建多个表。你试过什么了？@VinodBhavnani我更新了问题。代码位于组件“主类别”的视图中。组件“我希望根据类别中的项目数显示子组件“应用程序子类别”的x倍，但按行显示4列。

@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;
  }
}

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