Angular2：以行/列方式顯示組件

Question

我有一個具有以下結構的數組，其中第一個字段是組件名稱，第二個是該組件的數據，第三個是列號，第四個是行號。

我計划根據它們的列和行位置顯示這些項目。

[
    {"PieChart", Piechartdata, 0,1},
    {"donut", donutdata, 1,0},
    {"grid", griddata, 1,1}
] 

我嘗試使用*ngFor並遍歷這些數組，並使用switch case調用所需的組件。 但是所有這些組件都一個接一個地顯示。 但是我想根據它們的col, row位置顯示它們

 <table *ngFor="let Component of gadgetsComponents">
     <div  [ngSwitch]=Component[0]>
         <div *ngSwitchCase="'PieChart'">
             <app-donut [donutchartData] = "Component[1]"> </app-donut> 
         </div>
         <div *ngSwitchCase="'grid'"> 
             <app-grid [gridData] = "gadgetsComponent[1]"> </app-grid>
         </div>

Answer 1

既然您使用table為什么不利用它呢？

Plunker

<table>
 <tr *ngFor="let row of rows; let rowId = index">
 <td *ngFor="let col of cols; let colId = index">
   <div *ngIf="activeElement(rowId,colId) === 'PieChart'">PichartComponent</div>
   <div *ngIf="activeElement(rowId,colId) === 'donut'">DonutComponent</div>
   <div *ngIf="activeElement(rowId,colId) === 'grid'">GridComponent</div>
 </td>
</tr>