Nesting *ngfor. I need to populate subtasks under the parent task in Angular.ioAngular2 nested ngForAngular2 ngFor Parent ElementCounter for nested ngFor loops in Angular2Angular2 nested *ngForAngular2 *ngFor with nested ngTemplateOutlet and ngOutletContext with text inputAngular - Nested ngForHow to display nested @component in a ngFor loop with angular4?Nested ngFor in Angular 2ngFor index on nested objectNested ngFor select not clickable
How will losing mobility of one hand affect my career as a programmer?
Finding all intervals that match predicate in vector
Why "be dealt cards" rather than "be dealing cards"?
Using parameter substitution on a Bash array
Minimal reference content
Can criminal fraud exist without damages?
Star/Wye electrical connection math symbol
Is it okay / does it make sense for another player to join a running game of Munchkin?
Can a monster with multiattack use this ability if they are missing a limb?
Why did Kant, Hegel, and Adorno leave some words and phrases in the Greek alphabet?
What are the ramifications of creating a homebrew world without an Astral Plane?
Transcription Beats per minute
apt-get update is failing in debian
Increase performance creating Mandelbrot set in python
Can I use my Chinese passport to enter China after I acquired another citizenship?
Best way to store options for panels
Have I saved too much for retirement so far?
Is there any reason not to eat food that's been dropped on the surface of the moon?
What to do with wrong results in talks?
What is the opposite of 'gravitas'?
How could Frankenstein get the parts for his _second_ creature?
How can a jailer prevent the Forge Cleric's Artisan's Blessing from being used?
Greatest common substring
How do I keep an essay about "feeling flat" from feeling flat?
Nesting *ngfor. I need to populate subtasks under the parent task in Angular.io
Angular2 nested ngForAngular2 ngFor Parent ElementCounter for nested ngFor loops in Angular2Angular2 nested *ngForAngular2 *ngFor with nested ngTemplateOutlet and ngOutletContext with text inputAngular - Nested ngForHow to display nested @component in a ngFor loop with angular4?Nested ngFor in Angular 2ngFor index on nested objectNested ngFor select not clickable
0
stackblitz: https://stackblitz.com/edit/angular-xk9nw6?file=src%2Fapp%2Ftable%2Ftable.component.html
I have a json file with tasks that have a property of subtasks that have the same properties types as their parent tasks. when a parent task is clicked, the child subtasks need to be appended to the bottom of their parent. I'm trying to make a custom tree-grid without using these rigid libraries
You can see in my stackblitz that the subtasks are being populated under the all the parent tasks and not just the parent task they belong to. if I move the it inside the parent *ngfor, my subtask will be appended to the bottom of every parent task and not just the parent task it belongs to.
Bonus points for figuring out why subtasks.taskName won't show, while subtasks.taskID does.(Bonus solved by Julien Bertacco). thanks, bud.
my code so far:
sample data:
/**
* 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 ,
]
]
]
];
My Markup:
<!-- <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>
My logic:
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;
angular nested angular2-template ngfor treegrid asked Mar 21 at 15:14
camelCasecamelCase
204
New contributor
camelCase is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
0
stackblitz: https://stackblitz.com/edit/angular-xk9nw6?file=src%2Fapp%2Ftable%2Ftable.component.html
I have a json file with tasks that have a property of subtasks that have the same properties types as their parent tasks. when a parent task is clicked, the child subtasks need to be appended to the bottom of their parent. I'm trying to make a custom tree-grid without using these rigid libraries
You can see in my stackblitz that the subtasks are being populated under the all the parent tasks and not just the parent task they belong to. if I move the it inside the parent *ngfor, my subtask will be appended to the bottom of every parent task and not just the parent task it belongs to.
Bonus points for figuring out why subtasks.taskName won't show, while subtasks.taskID does.(Bonus solved by Julien Bertacco). thanks, bud.
my code so far:
sample data:
/**
* 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 ,
]
]
]
];
My Markup:
<!-- <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>
My logic:
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;
asked Mar 21 at 15:14
camelCasecamelCase
204
New contributor
camelCase is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
0
0
0
stackblitz: https://stackblitz.com/edit/angular-xk9nw6?file=src%2Fapp%2Ftable%2Ftable.component.html
I have a json file with tasks that have a property of subtasks that have the same properties types as their parent tasks. when a parent task is clicked, the child subtasks need to be appended to the bottom of their parent. I'm trying to make a custom tree-grid without using these rigid libraries
You can see in my stackblitz that the subtasks are being populated under the all the parent tasks and not just the parent task they belong to. if I move the it inside the parent *ngfor, my subtask will be appended to the bottom of every parent task and not just the parent task it belongs to.
Bonus points for figuring out why subtasks.taskName won't show, while subtasks.taskID does.(Bonus solved by Julien Bertacco). thanks, bud.
my code so far:
sample data:
/**
* 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 ,
]
]
]
];
My Markup:
<!-- <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>
My logic:
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;
asked Mar 21 at 15:14
camelCasecamelCase
204
New contributor
camelCase is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
stackblitz: https://stackblitz.com/edit/angular-xk9nw6?file=src%2Fapp%2Ftable%2Ftable.component.html
I have a json file with tasks that have a property of subtasks that have the same properties types as their parent tasks. when a parent task is clicked, the child subtasks need to be appended to the bottom of their parent. I'm trying to make a custom tree-grid without using these rigid libraries
You can see in my stackblitz that the subtasks are being populated under the all the parent tasks and not just the parent task they belong to. if I move the it inside the parent *ngfor, my subtask will be appended to the bottom of every parent task and not just the parent task it belongs to.
Bonus points for figuring out why subtasks.taskName won't show, while subtasks.taskID does.(Bonus solved by Julien Bertacco). thanks, bud.
my code so far:
sample data:
/**
* 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 ,
]
]
]
];
My Markup:
<!-- <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>
My logic:
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;
asked Mar 21 at 15:14
camelCasecamelCase
204
New contributor
camelCase is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Mar 21 at 15:14
camelCasecamelCase
204
New contributor
camelCase is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited Mar 21 at 16:26
camelCase
asked Mar 21 at 15:14
camelCasecamelCase
204
New contributor
camelCase is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Mar 21 at 15:14
camelCasecamelCase
204
asked Mar 21 at 15:14
camelCasecamelCase
204
204
New contributor
camelCase is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
camelCase is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
camelCase is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
For populate subtasks under the parent task you need to loop this way
<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>
And change your table.component.ts file subtask function by
subtask(e,i)
this.subtaskArray = e.subtasks
this.index = i;
this.foo == false ? this.foo = true : this.foo = false;
answered Mar 21 at 16:57
bhagwat tupebhagwat tupe
10511
That's the ticket. thank you. Ahhhh. it was there in my face the whole time. I feel double foolish. Thanks!
– camelCase
Mar 21 at 17:21
1
@camelCase : glad it helped :)
– bhagwat tupe
Mar 21 at 17:26
add a comment |
2
<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>
Bonus : you wrote substask instead of subtask
answered Mar 21 at 15:57
Julien BertaccoJulien Bertacco
213
New contributor
Julien Bertacco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
ahhhhhhh. You def win the bonus round. how did I miss that?!? I wish I had enough clout to give you an upvote. I need reputation 15. thanks good, sir
– camelCase
Mar 21 at 16:17
@camelCase please be sure to mark this as the answer if this solves your problem. thanks!
– Andy Danger Gagne
Mar 21 at 16:50
@AndyDangerGagne it solves only part. the bonus-y part that happened to be a typo
– camelCase
Mar 21 at 17:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
camelCase is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55283673%2fnesting-ngfor-i-need-to-populate-subtasks-under-the-parent-task-in-angular-io%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
For populate subtasks under the parent task you need to loop this way
<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>
And change your table.component.ts file subtask function by
subtask(e,i)
this.subtaskArray = e.subtasks
this.index = i;
this.foo == false ? this.foo = true : this.foo = false;
answered Mar 21 at 16:57
bhagwat tupebhagwat tupe
10511
That's the ticket. thank you. Ahhhh. it was there in my face the whole time. I feel double foolish. Thanks!
– camelCase
Mar 21 at 17:21
1
@camelCase : glad it helped :)
– bhagwat tupe
Mar 21 at 17:26
add a comment |
1
For populate subtasks under the parent task you need to loop this way
<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>
And change your table.component.ts file subtask function by
subtask(e,i)
this.subtaskArray = e.subtasks
this.index = i;
this.foo == false ? this.foo = true : this.foo = false;
answered Mar 21 at 16:57
bhagwat tupebhagwat tupe
10511
That's the ticket. thank you. Ahhhh. it was there in my face the whole time. I feel double foolish. Thanks!
– camelCase
Mar 21 at 17:21
1
@camelCase : glad it helped :)
– bhagwat tupe
Mar 21 at 17:26
add a comment |
1
1
1
For populate subtasks under the parent task you need to loop this way
<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>
And change your table.component.ts file subtask function by
subtask(e,i)
this.subtaskArray = e.subtasks
this.index = i;
this.foo == false ? this.foo = true : this.foo = false;
answered Mar 21 at 16:57
bhagwat tupebhagwat tupe
10511
For populate subtasks under the parent task you need to loop this way
<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>
And change your table.component.ts file subtask function by
subtask(e,i)
this.subtaskArray = e.subtasks
this.index = i;
this.foo == false ? this.foo = true : this.foo = false;
answered Mar 21 at 16:57
bhagwat tupebhagwat tupe
10511
answered Mar 21 at 16:57
bhagwat tupebhagwat tupe
10511
answered Mar 21 at 16:57
bhagwat tupebhagwat tupe
10511
answered Mar 21 at 16:57
bhagwat tupebhagwat tupe
10511
10511
That's the ticket. thank you. Ahhhh. it was there in my face the whole time. I feel double foolish. Thanks!
– camelCase
Mar 21 at 17:21
1
@camelCase : glad it helped :)
– bhagwat tupe
Mar 21 at 17:26
add a comment |
That's the ticket. thank you. Ahhhh. it was there in my face the whole time. I feel double foolish. Thanks!
– camelCase
Mar 21 at 17:21
1
@camelCase : glad it helped :)
– bhagwat tupe
Mar 21 at 17:26
That's the ticket. thank you. Ahhhh. it was there in my face the whole time. I feel double foolish. Thanks!
– camelCase
Mar 21 at 17:21
That's the ticket. thank you. Ahhhh. it was there in my face the whole time. I feel double foolish. Thanks!
– camelCase
Mar 21 at 17:21
1
1
@camelCase : glad it helped :)
– bhagwat tupe
Mar 21 at 17:26
@camelCase : glad it helped :)
– bhagwat tupe
Mar 21 at 17:26
add a comment |
2
<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>
Bonus : you wrote substask instead of subtask
answered Mar 21 at 15:57
Julien BertaccoJulien Bertacco
213
New contributor
Julien Bertacco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
ahhhhhhh. You def win the bonus round. how did I miss that?!? I wish I had enough clout to give you an upvote. I need reputation 15. thanks good, sir
– camelCase
Mar 21 at 16:17
@camelCase please be sure to mark this as the answer if this solves your problem. thanks!
– Andy Danger Gagne
Mar 21 at 16:50
@AndyDangerGagne it solves only part. the bonus-y part that happened to be a typo
– camelCase
Mar 21 at 17:16
add a comment |
2
<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>
Bonus : you wrote substask instead of subtask
answered Mar 21 at 15:57
Julien BertaccoJulien Bertacco
213
New contributor
Julien Bertacco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
ahhhhhhh. You def win the bonus round. how did I miss that?!? I wish I had enough clout to give you an upvote. I need reputation 15. thanks good, sir
– camelCase
Mar 21 at 16:17
@camelCase please be sure to mark this as the answer if this solves your problem. thanks!
– Andy Danger Gagne
Mar 21 at 16:50
@AndyDangerGagne it solves only part. the bonus-y part that happened to be a typo
– camelCase
Mar 21 at 17:16
add a comment |
2
2
2
<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>
Bonus : you wrote substask instead of subtask
answered Mar 21 at 15:57
Julien BertaccoJulien Bertacco
213
New contributor
Julien Bertacco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
<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>
Bonus : you wrote substask instead of subtask
answered Mar 21 at 15:57
Julien BertaccoJulien Bertacco
213
New contributor
Julien Bertacco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Mar 21 at 15:57
Julien BertaccoJulien Bertacco
213
New contributor
Julien Bertacco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Mar 21 at 15:57
Julien BertaccoJulien Bertacco
213
answered Mar 21 at 15:57
Julien BertaccoJulien Bertacco
213
213
New contributor
Julien Bertacco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Julien Bertacco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Julien Bertacco is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
ahhhhhhh. You def win the bonus round. how did I miss that?!? I wish I had enough clout to give you an upvote. I need reputation 15. thanks good, sir
– camelCase
Mar 21 at 16:17
@camelCase please be sure to mark this as the answer if this solves your problem. thanks!
– Andy Danger Gagne
Mar 21 at 16:50
@AndyDangerGagne it solves only part. the bonus-y part that happened to be a typo
– camelCase
Mar 21 at 17:16
add a comment |
ahhhhhhh. You def win the bonus round. how did I miss that?!? I wish I had enough clout to give you an upvote. I need reputation 15. thanks good, sir
– camelCase
Mar 21 at 16:17
@camelCase please be sure to mark this as the answer if this solves your problem. thanks!
– Andy Danger Gagne
Mar 21 at 16:50
@AndyDangerGagne it solves only part. the bonus-y part that happened to be a typo
– camelCase
Mar 21 at 17:16
ahhhhhhh. You def win the bonus round. how did I miss that?!? I wish I had enough clout to give you an upvote. I need reputation 15. thanks good, sir
– camelCase
Mar 21 at 16:17
ahhhhhhh. You def win the bonus round. how did I miss that?!? I wish I had enough clout to give you an upvote. I need reputation 15. thanks good, sir
– camelCase
Mar 21 at 16:17
@camelCase please be sure to mark this as the answer if this solves your problem. thanks!
– Andy Danger Gagne
Mar 21 at 16:50
@camelCase please be sure to mark this as the answer if this solves your problem. thanks!
– Andy Danger Gagne
Mar 21 at 16:50
@AndyDangerGagne it solves only part. the bonus-y part that happened to be a typo
– camelCase
Mar 21 at 17:16
@AndyDangerGagne it solves only part. the bonus-y part that happened to be a typo
– camelCase
Mar 21 at 17:16
add a comment |
camelCase is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
camelCase is a new contributor. Be nice, and check out our Code of Conduct.
camelCase is a new contributor. Be nice, and check out our Code of Conduct.
camelCase is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55283673%2fnesting-ngfor-i-need-to-populate-subtasks-under-the-parent-task-in-angular-io%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
