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