Angular2：以行/列方式显示组件答案

【问题标题】：Angular2: Displaying components in row/column fashionAngular2：以行/列方式显示组件
【发布时间】：2017-03-28 14:01:51
【问题描述】：

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

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

[
    {"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>

【问题讨论】：

你的数组既不是 JSON 也不是数组...
我不知道我的做法是否正确。我有一些组件、它们的数据、它们的列和行位置，我想在我的页面上显示它们。上面的方法我试过了，还是不行。

标签： angular angular2-template

【解决方案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>

【讨论】：

是否有可能使用引导程序的 'col-md-*' 使其看起来更有条理而不是表格？
但是在这里我们应该能够在调用 PieChartComponent 时传递数据“Piechartdata”。从 activeElement(rowId,colId) 我们只得到图表类型。
我有一个不同的想法，如何添加锚点并根据列数启用/禁用它们。