Angular2:以行/列方式显示组件 [英] Angular2: Displaying components in row/column fashion
问题描述
我有一个具有以下结构的数组，其中第一个字段是组件名称，第二个是该组件的数据，第三个是列号，第四个是行号.
我打算根据它们的列和行位置显示这些项目.
<预><代码>[{"饼图", 饼图数据, 0,1},{甜甜圈"，甜甜圈数据，1,0}，{网格"，网格数据，1,1}]我尝试使用 *ngFor 并遍历这些数组并使用 switch case 来调用所需的组件.但所有这些组件都显示在一个下方.但我想根据它们的 col, row 位置
<div [ngSwitch]=组件[0]><div *ngSwitchCase="'饼图'"><app-donut [donutchartData] = "Component[1]"></app-donut><div *ngSwitchCase="'grid'"><app-grid [gridData] = "gadgetsComponent[1]"></app-grid>
解决方案 既然你在用 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>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>
解决方案 Since you are use table why not taking advantage of it ?
<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屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆