Question

我有以下数组：

{Test1:aaa,Test2:bbb, Test3:ccc, Test4: ddd, Test5: eee},
{Test1:aaa,Test2:bbb, Test3:ccc, Test4: ddd1, Test5: eee1},
{Test1:aaa,Test2:bbb, Test3:ccc, Test4: ddd2, Test5: eee2},
{Test1:aaa,Test2:bbb, Test3:ccc, Test4: ddd3, Test5: eee3},
...

表格结果如下：

 Test1    Test2    Test3   Test4   Test5
 aaa      bbb      ccc     ddd     eee
 aaa      bbb      ccc     ddd1    eee1
 aaa      bbb      ccc     ddd2    eee2
 aaa      bbb      ccc     ddd3    eee3

但是我需要有这样的详细视图表：

 Test1    Test2    Test3   
 aaa      bbb      ccc     
   ddd     eee
   ddd1    eee1
   ddd2    eee2
   ddd3    eee3
 aaa1     ...       ...
 ...

如何在模板中生成此表？我已经有了以下脚本：

<table>
              <colgroup>
                <col *ngFor="let column of columns" [ngStyle]="{'width': column.ratio}">
              </colgroup>
              <tbody>
                <tr *ngFor="let row of dataset; let index=index; let odd=odd; let even=even" 
                [ngClass]="{ odd: odd, alt: even, selectedRow: selectedRow===index }" (click)="select(index)" (dblclick)="dblClickF($event,row)" >

                <td *ngFor="let col of row | values; let first = first;"  [ngClass]="{'first unpack':first}" (click)="unpack(row,first)">{{col}}</td>
                </tr>
              </tbody>
              </table>

你能帮帮我吗？（任何plunkr？）

Answer 1

你需要创建一个调用自身的组件，如果它有更多的子组件，你可以在同一个组件中使用import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-add-member', templateUrl: './add-member.component.html' }) export class AddMemberComponent implements OnInit { genderList: string[]; constructor() { this.genderList=["Male","Female"]; } ngOnInit() { } onSubmit(form: any): void{ console.log('Form value = ', form); } }和viewContainerRef将新创建的组件放在旧组件下，检查我创建的这两个掠夺者并看看它是否有帮助：

点击展开子数据： https://plnkr.co/HETv1d

递归扩展子项： https://plnkr.co/WcduaE

此外，如果它看起来像这样，您的数据结构将更容易使用：

ComponentFactoryResolver

Angular 2生成表行，其中包含数组中的详细行

1 个答案: