Вложение * ngfor. Мне нужно заполнить подзадачи под родительской задачей в Angular.io - PullRequest
Новая
       47

Вложение * ngfor. Мне нужно заполнить подзадачи под родительской задачей в Angular.io

0 голосов
/ 21 марта 2019

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

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

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

Бонусные баллы за выяснение, почему выиграл subtasks.taskName 'покажет subtasks.taskID. (Бонус решен Жюльеном Бертакко).спасибо, приятель.

мой код пока:

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

/**
 * 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 },
                    ]
                }]
            }
        ]
    }
];

Моя разметка: 

    <!-- <H1>Table</H1>

<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">
  <tr>
    <td class="" (click)="subtask(datum); $event.stopPropagation()" >> </td>
    <td class="">{{datum.taskID}}</td>
    <td class="">{{datum.taskName}}</td>
    <td class="btn btn.primary" (click)="dropdown(datum)">...</td>
  </tr>
</tbody> 
<tbody>
      <tr [hidden]="!foo" *ngFor="let subtask of subtaskArray" >
          <td class="">> </td>
          <td class="">{{subtask?.taskID}}</td>
          <td class="">{{subtask?.taskName}}</td>
          <td class=" btn btn.primary" (click)="dropdown(subtask)">...</td>
        </tr>
</tbody>
</table> -->
<H1>Table</H1>

<table  class="table">
  <thead>
  <tr>
    <th>expand</th>
    <th>task id</th>
    <th>task name</th>
    <th>button</th>
  </tr>
</thead>  
<tbody>
  <tr *ngFor="let datum of data">
    <td class="" (click)="subtask(datum); $event.stopPropagation()" >> </td>
    <td class="">{{datum.taskID}}</td>
    <td class="">{{datum.taskName}}</td>
    <td class="btn btn.primary" (click)="dropdown(datum)">...</td>
  </tr>
  <tr [hidden]="!foo" *ngFor="let subtask of subtaskArray" >
      <td class="">> </td>
      <td class="">{{subtask?.taskID}}</td>
      <td class="">{{subtask?.taskName}}</td>
      <td class=" btn btn.primary" (click)="dropdown(subtask)">...</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 index: number;

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

  subtask(e){
    console.log(e);

    this.subtaskArray = e.subtasks
    this.index = e.taskID;
    this.foo == false ? this.foo = true : this.foo = false;


  }

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

Ответы [ 2 ]

2 голосов
/ 21 марта 2019

Для заполнения подзадач в родительской задаче вам нужно выполнить цикл таким образом 

<tbody *ngFor="let datum of data; index as i">
  <tr>
      <td class="" (click)="subtask(datum, i); $event.stopPropagation()" >> </td>
      <td class="">{{datum.taskID}}</td>
      <td class="">{{datum.taskName}}</td>
      <td class="btn btn.primary" (click)="dropdown(datum)">...</td>
  </tr>
  <tr [hidden]="index != i" *ngFor="let subtask of datum.subtasks" >
      <td class="">> </td>
      <td class="">{{subtask?.taskID}}</td>
      <td class="">{{subtask?.taskName}}</td>
      <td class=" btn btn.primary" (click)="dropdown(subtask)">...</td>
  </tr>
</tbody>

и изменить функцию table.component.ts file subtask на 

subtask(e,i){    
   this.subtaskArray = e.subtasks
   this.index = i;
   this.foo == false ? this.foo = true : this.foo = false;    
}
2 голосов
/ 21 марта 2019 
<ul *ngFor="let datum of data">
<li>
<span (click)="subtask(datum); $event.stopPropagation()">></span>
{{datum.taskID}} {{datum.taskName}}

 <ul [hidden]="!foo">
 <li *ngFor="let subtask of subtaskArray">
  {{subtask?.taskID}} {{subtask?.taskName}}
 </li>

</ul>
</li>
</ul>

Бонус: вы написали под s задачу вместо подзадачи

...