Angular2:以行/列方式显示组件 [英] 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}
] 

我尝试使用*ngFor并遍历这些数组，并使用switch case调用所需的组件.但是所有这些组件都显示在另一个组件的下方.但是我想根据它们的col, row位置显示它们

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>

推荐答案

既然您使用的是table，为什么不利用它呢?

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>

这篇关于Angular2:以行/列方式显示组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！