Angular2: Displaying components in row/column fashion

问题

I have an array with the below structure where the first field is the component name, second is the data for that component, third is column number and fourth is row number.

I am planning to display these items based on their col and row location.

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

I tried to use *ngFor and loop through these array and use switch case to call the desired component. But all these components are displayed one below the other. But I want to display them based on their col, row location

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

回答1:

Since you are use table why not taking advantage of it ?

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>

来源：https://stackoverflow.com/questions/43071686/angular2-displaying-components-in-row-column-fashion

标签

angular

angular2-template