以下のコードに基づいてDIVと動的テーブルを生成main-category.componentngForループ
<div>
<div *ngFor="let category of categories;">
<app-subcategory>
[name]="category.name">
</app-subcategory>
</div>
</div>
の図である私は4列の表を生成好きcategories内のアイテムの数に依存行をxはだろう。各セルには、コンポーネントapp-subcategoryが含まれています。
これを行う正しい方法はありません。アイデアはありますか？
おかげで、
@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;
}
}
は、あなたが本当の行と列を取得するために<tr>と<td>にdivを変更する場合がありますも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>
参照してください。
7k担当者は、要件と質問の違いを知っていることが期待されます。何を試しましたか*、それに何が問題なのですか？ – jonrsharpe
さらに詳しい情報を提供する必要があります。テーブルはどこですか？ app-subcategory内のdiv内にある場合は、複数の表を作成しています。あなたはまだ何を試しましたか？ –
@VinodBhavnani質問を更新しました。コードはコンポーネント 'main-category.component'のビューにあります。カテゴリの項目数に基づいてx行に4列のサブコンポーネント 'app-subcategory'をx回表示したいとします。 –