Angular 角度2：以行/列方式显示组件

我有一个如下结构的数组，其中第一个字段是组件名，第二个是该组件的数据，第三个是列号，第四个是行号

我计划根据它们的列和行位置显示这些项目

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

我尝试使用

*ngFor

并循环遍历这些数组，然后使用switch case调用所需的组件。但所有这些组件都是一个接一个地显示的。但是我想根据它们的

列、行

位置来显示它们

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

---

既然您正在使用

表格

为什么不利用它呢

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

皮哈特元件
甜甜圈组件
网格组件

---

你的数组既不是JSON也不是数组……我不知道我的方法是否正确。我有一些组件、它们的数据、它们的列和行位置，我想在我的页面上显示它们。我尝试了上述方法，但没有成功。是否有可能使用bootstrap的“col md-*”使其看起来更结构化，而不是表？但在这里，我们应该能够在调用PieChartComponent时传递数据“Piechartdata”。从activeElement（rowId，colId）我们只得到图表类型。我有一个不同的想法，添加定位点并根据列数启用/禁用它们怎么样。