generieren dynamische Tabelle mit div basierend auf ngFor Schleife

Question

Der Code unten in einer Ansicht ist von main-category.component

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

ich eine Tabelle mit vier Spalten erzeugen möchte und x Zeilen die Anzahl der Elemente in categories abhängig. Jede Zelle enthält die Komponente app-subcategory.

Ich sehe nicht den richtigen Weg, dies zu tun. Hast du eine Idee?

Danke,

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

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

Sie könnten die divs in <tr> und <td> um real Zeilen und Spalten ändern möchten.