Как я могу создать вложенную, рекурсивную таблицу, которая может развернуть x уровней в Angular

Question

Мне нужно составить таблицу с данными с вложенными подзадачами.Мне нужно сделать эту таблицу рекурсивной.Существует много литературы о ng для рекурсивного отображения данных, но не в табличном формате.Есть много вещей, которые усложняют работу с таблицами (например, использование тегов div вне тегов td и т. Д.)

, вот что я получил до стека.

https://stackblitz.com/edit/angular-xk9nw6?file=src%2Fapp%2Ftable%2Ftable.component.html

Как видите, я могу развернуть только один уровень, прежде чем столкнусь с проблемами с компонентом ngFor

<H1 style="text-indent: 10px">Table</H1>

<style>
table{
  background:rgb(223, 221, 221);
}
</style>

<table  class="table">
  <thead>
  <tr>
    <th>expand</th>
    <th>task id</th>
    <th>task name</th>
    <th>button</th>
  </tr>
</thead>  
<tbody *ngFor="let datum of data; index as i">
  <tr>
      <td class="" (click)="task(datum, i); $event.stopPropagation()" > 
        <i [ngClass]="(index != i)?'fas fa-plus':'fas fa-minus'"></i> 
      </td>
      <td class="">{{datum.taskID}}</td>
      <td class="">{{datum.taskName}}</td>
      <td ALIGN="center">

        <!-- <i class="fas fa-ellipsis-h" data-toggle="dropdown"></i> -->


          <select>        
               <option (click)="dropdown(datum)" value="add">Add</option>
               <option (click)="dropdown(datum)" value="edit">Edit</option>
               <option (click)="dropdown(datum)" value="delete">Delete</option>
          </select>

        </td> 
  </tr>
  <tr [hidden]="index != i" *ngFor="let subtask of datum.subtasks; index as j" >
    <div [hidden]="!subtask.subtasks">
      <td class="" style="text-indent: 15px" (click)="subtaskQ(subtask, j)"> <i class="fas fa-plus"></i> </td>
    </div>
    <div [hidden]="subtask.subtasks">
        <td class="" style="text-indent: 15px" (click)="subtaskQ(subtask, j)"></td>
    </div>
      <td class="">{{subtask?.taskID}}</td>
      <td class="">{{subtask?.taskName}}</td>
      <td ALIGN="center">
          <select>        
               <option (click)="dropdown(subtask)" value="add">Add</option>
               <option (click)="dropdown(subtask)" value="edit">Edit</option>
               <option (click)="dropdown(subtask)" value="delete">Delete</option>
          </select>
        </td>
  </tr>
  <tr [hidden]="index != i && index !=j" *ngFor="let subtaskL of subtask; index as e" >

        <td class="" style="text-indent: 15px" (click)="subtaskQ(subtask, j)"></td>
        <td class="">{{subtaskL?.taskID}}</td>
        <td class="">{{subtaskL?.taskName}}</td>
        <td ALIGN="center">
            <select>        
                 <option (click)="dropdown(subtask)" value="add">Add</option>
                 <option (click)="dropdown(subtask)" value="edit">Edit</option>
                 <option (click)="dropdown(subtask)" value="delete">Delete</option>
            </select>
          </td>
    </tr>
</tbody> 



</table>

import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from '../datasource';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  constructor() { }

  @ViewChild('treegrid')
  public data: Object[];
  public foo: boolean;
  public subtaskArray: any;
  public subSubtaskArray: any;
  public index: number;

  dropdown(e){
    console.log(e);
  }

  task(e, i){
    console.log(e);

    this.subtaskArray = e.subtasks
    this.index = i;
  }

  subtaskQ(e, j){
    this.subSubtaskArray = e.subtasks;
    console.log(j);
    console.log(e);

  }

  switch(){
    if(this.foo){
      this.foo =false;
    } else {
    this.foo = true;
    }
  }

  ngOnInit(): void {
    this.data = sampleData;
}
}

пример данных

/**
 * Test cases data source
 */
export let sampleData: Object[] = [
    {
        taskID: 1,
        taskName: 'Planning',
        startDate: new Date('02/03/2017'),
        endDate: new Date('02/07/2017'),
        progress: 100,
        duration: 5,
        priority: 'Normal',
        approved: false,
        isInExpandState: true,
        subtasks: [
            { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
            { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, approved: true },
            { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
            { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'), endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
        ]
    },
    {
        taskID: 6,
        taskName: 'Design',
        startDate: new Date('02/10/2017'),
        endDate: new Date('02/14/2017'),
        duration: 3,
        progress: 86,
        priority: 'High',
        isInExpandState: false,
        approved: false,
        subtasks: [
            { taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
            { taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
            { taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress: 100, approved: true },
            { taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress: 100, approved: true },
            { taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'), endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
        ]
    },
    {
        taskID: 12,
        taskName: 'Implementation Phase',
        startDate: new Date('02/17/2017'),
        endDate: new Date('02/27/2017'),
        priority: 'Normal',
        approved: false,
        duration: 11,
        subtasks: [
            {
                taskID: 13,
                taskName: 'Phase 1',
                startDate: new Date('02/17/2017'),
                endDate: new Date('02/27/2017'),
                priority: 'High',
                approved: false,
                duration: 11,
                subtasks: [{
                    taskID: 14,
                    taskName: 'Implementation Module 1',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'Normal',
                    duration: 11,
                    approved: false,
                    subtasks: [
                        { taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
                        { taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                        { taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                        { taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
                        { taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                        { taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'), endDate: new Date('02/27/2017'), duration: 0, priority: 'Low', approved: true }

                    ]
                }]
            },
            {
                taskID: 21,
                taskName: 'Phase 2',
                startDate: new Date('02/17/2017'),
                endDate: new Date('02/28/2017'),
                priority: 'High',
                approved: false,
                duration: 12,
                subtasks: [{
                    taskID: 22,
                    taskName: 'Implementation Module 2',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/28/2017'),
                    priority: 'Critical',
                    approved: false,
                    duration: 12,
                    subtasks: [
                        { taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true },
                        { taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true },
                        { taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'), endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                        { taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'), endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false },
                        { taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'), endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                        { taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'), endDate: new Date('02/28/2017'), duration: 0, priority: 'Normal', approved: false }

                    ]
                }]
            },

            {
                taskID: 29,
                taskName: 'Phase 3',
                startDate: new Date('02/17/2017'),
                endDate: new Date('02/27/2017'),
                priority: 'Normal',
                approved: false,
                duration: 11,
                subtasks: [{
                    taskID: 30,
                    taskName: 'Implementation Module 3',
                    startDate: new Date('02/17/2017'),
                    endDate: new Date('02/27/2017'),
                    priority: 'High',
                    approved: false,
                    duration: 11,
                    subtasks: [
                        { taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
                        { taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false },
                        { taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
                        { taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
                        { taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
                        { taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'), endDate: new Date('02/27/2017'), duration: 0, priority: 'Critical', approved: false },
                    ]
                }]
            }
        ]
    }
];

Я надеюсь создать таблицу, которая рекурсивно обрабатывает данные, помещая подзадачи под своими родительскими задачами, а подзадачи - под родительскими подзадачами и т. Д., И т. Д.

В настоящее время я могу развернуть только один уровень без динамической разметки.Есть много примеров того, как это работает с неупорядоченными списками, но эти методы, похоже, не работают и с таблицами.удаление тега селектора внутри его собственной разметки вызывает проблемы.

Answer 1

Рекурсивный компонент, он делает только такой компонент, как

@Component({
  selector: 'recursive-component',
  template:`
  <ng-container>
  {{index}}--some template--, e.g {{item.title}}
  </ng-container>
     <ng-container *ngIf="item.children">
      <recursive-component *ngFor="let item of item.children" [index]="index+1" [item]="item">
      </recursive-component>
     <ng-container>  `

})
export class MenuComponent {
  @Input() item:any
  @Input() index:number=0;
}

Мне нравится знать, что "уровень рекурсии" является причиной этого "индекса".Мы должны использовать, чтобы избежать создания дополнительных html-тегов, а также взглянуть на то, что мы должны заполнить компонент объектом с дочерними элементами, поэтому.если у нас есть массив, такой как

items = [{ title: "item1" },
    {
      title: "item2", children: [
        { title: "item 2.1" },
        { title: "item 2.2" }]
    },
    { title: "item3" }
    ]

Мы можем создать «на лету» объект с детьми, и наш .html будет

<recursive-component [item]="{children:menu}"  ></recursive-component>

Но вы не можете использовать таблицы,потому что всегда вы получите таблицу внутри другой таблицы или tr внутри другой tr

Если вам нужно использовать таблицу, вы можете предпринять другой подход: сгенерировать массив на основе ваших данных и, если он будет расширен или нет.Таким образом, вы можете сделать такую ​​функцию, как

  getItems(data, items,index) {
    data.forEach(x => {
      if (!items)
        items=[];
      items.push(x);
      items[items.length-1].index=index

      if (x.subtasks && x.expanded)
        this.getItems(x.subtasks,items,index+1);
    }
    )
    return items;
  }

Тогда вы можете просто

//In your .html
<table>
  <tr (click)="expanded(item)" *ngFor="let item of items">
    <td>{{item.taskID}}</td>
    <td>{{item.taskName}}</td>
  </tr>
  </table>

//And in your .ts
  ngOnInit()
  {
    this.items=this.getItems(this.sampleData,null,0)
  }

  expanded(item:any)
  {
    item.expanded=!item.expanded;
    this.items=this.getItems(this.sampleData,null,0)

  }

В stackblitz , вы можете увидеть две опции

ПРИМЕЧАНИЕ: я просто использую div (click) или tr (click), чтобы изменить свойство "extended".

ПРИМЕЧАНИЕ2: в stackblitz я использую "index", чтобы изменить поля или отступы элементов