The idea
I want to create an comment of the post. The comment can be nested each other like Reddit.com or Facebook like this By using
Here is my example: https://stackblitz.com/edit/angular-rtzh5a?file=src/app/tree-flat-overview-example.html
But when i implement data from backend. Data row like this
[
{
"id": 63,
"postId": 16,
"createdDate": 1581613200.000000000,
"text": "1",
"userName": "cuongnga",
"parent": 0,
"level": 1,
"dtoList": [
{
"id": 65,
"postId": 16,
"createdDate": 1581613200.000000000,
"text": "3",
"userName": "cuongnga",
"parent": 63,
"level": 2,
"dtoList": []
},
{
"id": 67,
"postId": 16,
"createdDate": 1581613200.000000000,
"text": "5",
"userName": "cuongnga",
"parent": 63,
"level": 2,
"dtoList": []
},
{
"id": 68,
"postId": 16,
"createdDate": 1645282033.274324000,
"text": "6",
"userName": "admin12344",
"parent": 63,
"level": 2,
"dtoList": []
}
]
},
{
"id": 64,
"postId": 16,
"createdDate": 1581613200.000000000,
"text": "2",
"userName": "cuongnga",
"parent": 0,
"level": 1,
"dtoList": [
{
"id": 66,
"postId": 16,
"createdDate": 1581613200.000000000,
"text": "4",
"userName": "cuongnga",
"parent": 64,
"level": 2,
"dtoList": []
},
{
"id": 69,
"postId": 16,
"createdDate": 1645282072.131938000,
"text": "7",
"userName": "admin12344",
"parent": 64,
"level": 2,
"dtoList": []
},
{
"id": 70,
"postId": 16,
"createdDate": 1645282076.143212000,
"text": "8",
"userName": "admin12344",
"parent": 64,
"level": 2,
"dtoList": [
{
"id": 71,
"postId": 16,
"createdDate": 1645282328.834463000,
"text": "9",
"userName": "admin12344",
"parent": 70,
"level": 2,
"dtoList": []
},
{
"id": 72,
"postId": 16,
"createdDate": 1645282398.386108000,
"text": "10",
"userName": "admin12344",
"parent": 70,
"level": 3,
"dtoList": []
}
]
}
]
}
]
This is my code in Angular component: ViewPostComponent
import { Component, OnInit } from '@angular/core';
import { PostService } from 'src/app/shared/post.service';
import { ActivatedRoute, Router } from '@angular/router';
import { PostModel } from 'src/app/shared/post-model';
import { throwError } from 'rxjs';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { CommentPayload } from 'src/app/comment/comment.payload';
import { CommentService } from 'src/app/comment/comment.service';
import { FlatTreeControl } from '@angular/cdk/tree';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
interface ExampleFlatNode {
expandable: boolean;
userName: string;
text: string;
level: number;
}
@Component({
selector: 'app-view-post',
templateUrl: './view-post.component.html',
styleUrls: ['./view-post.component.css']
})
export class ViewPostComponent implements OnInit {
postId: number;
post: PostModel;
commentForm: FormGroup;
commentPayload: CommentPayload;
comments: CommentPayload[];
constructor(private postService: PostService, private activateRoute: ActivatedRoute,
private commentService: CommentService, private router: Router) {
this.postId = this.activateRoute.snapshot.params.id;
this.commentForm = new FormGroup({
text: new FormControl('', Validators.required)
});
this.commentPayload = {
text: '',
postId: this.postId
};
this.dataSource.data = this.comments;
}
ngOnInit(): void {
this.getPostById();
this.getCommentsForPost();
}
postComment() {
this.commentPayload.text = this.commentForm.get('text').value;
this.commentService.postComment(this.commentPayload).subscribe(data => {
this.commentForm.get('text').setValue('');
this.getCommentsForPost();
}, error => {
throwError(error);
})
}
private getPostById() {
this.postService.getPost(this.postId).subscribe(data => {
this.post = data;
}, error => {
throwError(error);
});
}
private getCommentsForPost() {
this.commentService.getAllCommentsForPost(this.postId).subscribe(data => {
this.comments = data;
}, error => {
throwError(error);
});
}
private _transformer = (node: CommentPayload, level: number) => {
return {
expandable: !!node.dtoList && node.dtoList.length > 0,
userName: node.username,
text: node.text,
level: level,
};
};
treeControl = new FlatTreeControl<ExampleFlatNode>(
(node) => node.level,
(node) => node.expandable
);
treeFlattener = new MatTreeFlattener(
this._transformer,
(node) => node.level,
(node) => node.expandable,
(node) => node.dtoList
);
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
}
CommentPayload.ts and PostModel
export class CommentPayload{
text: string;
postId: number;
username?:string;
duration?: string;
dtoList?:CommentPayload[];
}
export class PostModel {
id: number;
postName: string;
url: string;
description: string;
voteCount: number;
userName: string;
subredditName: string;
commentCount: number;
duration: string;
upVote: boolean;
downVote: boolean;
}
And View-PostComponent
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
{{node.userName + node.text}}
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
<button
mat-icon-button
matTreeNodeToggle
[attr.aria-label]="'Toggle ' + node.userName + 'node.text'"
>
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<p>{{node.userName}}</p>
<b>{{node.text}}</b>
</mat-tree-node>
</mat-tree>
And it isn't work. The tree isn' made show up enter image description here
In conclusion. My example at stackblitz is fine but When i deploy to my project, getting data from back-end and it's not working. So i need an advise or suggest. I don't know what im wrong T_T