Question

以下代码位于main-category.component

的视图中

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

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

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

谢谢，

Answer 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>以获得真实的行和列。

基于ngFor循环

1 个答案: