How can you display recursive data in a table using angular2?

Question

I have a recursive data structure (recursive through a property children), as shown below:

export interface IExecutableLog {
    round: number;
    log: string;
}

export interface IExecutableResult {
    uid: string;
    name: string;
    desc: string;
    status: string;
    passedRounds: number;
    totalRound: number;
    children?: IExecutableResult[];
    statementType?: string;
    logs?: IExecutableLog[];
}

export interface ISummary {
    title: string;
    jobName: string;
    timestamp: Date;
    tester: string;
    result: string;
    executionId: string;
    testJobId: string;
    resultDetails: IExecutableResult;
}

And I want to display Isummary type data from the backend.

I tried to define the component as shown below:

// pats-report-element.component.ts
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { IExecutableResult } from '../pats-report.interface';

@Component({
    selector: 'pats-report-element',
    templateUrl: 'app/report/basic/pats-report-element.html',
    encapsulation: ViewEncapsulation.None,
})
export class  PatsReportElementComponent {
    @Input()
    public data: IExecutableResult;
}
// app/report/basic/pats-report-element.html
<tr>
    <td>{{data?.name}}</td>
    <td>{{data?.status}}</td>
    <td>{{data?.rounds}}</td>
    <td>{{data?.passedRounds}}</td>
    <td>{{data?.rounds > 0 ? (data.passedRounds / data.rounds) * 100 + "%" : "NA"}}</td>
    <td>{{data?.timestamp | date:"y-MM-dd HH:mm:ss"}}</td>
</tr>

<template [ngIf]="data && data.children">
    <template ngFor let-item [ngForOf]="data.children" let-i="index">
        <pats-report-element [data]="item"></pats-report-element>
    </template>
</template>

But the DOM rendering will contain the "pats-report-element" element of the host, which is not valid inside the tag <table></table>. The DOM is as follows:

I checked the angular2 doc and it seems attribute-directives is the right choice. But I can’t find a way to use the template with attribute directives, like what I do in PatsReportElementComponent.

So what is the right way to achieve my goal?

[Update 1]

Tried @Günter Zöchbauer - . DOM , (<tr></tr> ).

Answer 1

@Component({
  selector: '[pats-report-element]',

,

<tr pats-report-element [data]="item"></tr>

, .

Answer 2

native angular2. - ag-grid-ng2. , , .

Answer 3

I'm not sure if it will solve your problem, in the component that you recursively refer to the same component in the template, you must refer to it yourself in your directive.

//pats-report-element.component.ts import {Component, Input, ViewEncapsulation} of '@ angular / core'; import {IExecutableResult} from '../pats-report.interface';

@Component({
    selector: 'pats-report-element',
    directives: [forwardRef(() => PatsReportElementComponent )], // <<<<<< change
    templateUrl: 'app/report/basic/pats-report-element.html',
    encapsulation: ViewEncapsulation.None,
})
export class  PatsReportElementComponent {
    @Input()
    public data: IExecutableResult;
}
// app/report/basic/pats-report-element.html
<tr>
    <td>{{data?.name}}</td>
    <td>{{data?.status}}</td>
    <td>{{data?.rounds}}</td>
    <td>{{data?.passedRounds}}</td>
    <td>{{data?.rounds > 0 ? (data.passedRounds / data.rounds) * 100 + "%" : "NA"}}</td>
    <td>{{data?.timestamp | date:"y-MM-dd HH:mm:ss"}}</td>
</tr>

<template [ngIf]="data && data.children">
    <template ngFor let-item [ngForOf]="data.children" let-i="index">
        <pats-report-element [data]="item"></pats-report-element>
    </template>
</template>

See if this works for you.