Обновленный вид не отображается, если один из комментариев удален из вложенных комментариев.

Question

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

родительский компонент html

<div class="container">
  <div class="card" style="margin-top: 20px;">
    <div class="card-body">
      <h5 class="card-title">{{ post.title }}</h5>
      <p class="card-text">{{ post.post }}</p>
      <p class="card-text"><small class="text-muted">{{ post.created | dateAgo }}</small></p>
    </div>
  </div>
  <div class="post-comments">
    <form style="margin-top: 10px;">
      <div class="comment-wrap">
        <div class="photo">
            <div class="avatar" style="background-image: url('https://s3.amazonaws.com/uifaces/faces/twitter/dancounsell/128.jpg')"></div>
        </div>
        <div class="comment-block">
          <textarea [(ngModel)]="txtnewcomment" id="txtnewcomment" name="comment" (keyup)="autoGrowTextZone($event)" class="form-control"  cols="30" rows ="2" placeholder="Add comment..."></textarea>
        </div>
      </div>
        <button type="submit" (click)="onSubmit()" class="btn btn-outline-secondary btn-sm float-right mb-3">Add comment</button>
      </form>
      <div class="comment-container">
        <app-childcomments (CommentsChange)="Usercommentsmodel = $event" [Usercommentsmodel]="Usercommentsmodel"></app-childcomments>
      </div>
  </div>
</div>

родитель файл component.ts

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import { Guid } from 'guid-typescript';

import { SharedService, PostService, Usercommentsservice } from '../../_services';
import { Usercommentsmodel, MainPost} from '../../_models';

@Component({
  selector: 'app-usercomments',
  templateUrl: './usercomments.component.html',
  styleUrls: ['./usercomments.component.css']
})
export class UsercommentsComponent implements OnInit {
txtnewcomment: string;
Usercommentsmodel: Usercommentsmodel[];
newcomment: Usercommentsmodel;
post: MainPost;
postid = '';
UserId = '';
guid: Guid;
  constructor(private router: Router,
              private usercommentsservice: Usercommentsservice,
              private sharedService: SharedService,
              private postservice: PostService) { }

  ngOnInit() {
    this.postid = localStorage.getItem('postid');
    this.UserId = localStorage.getItem('UserId');
    // if (refreshpostid == null) {
    // this.sharedService.sharedMessage.subscribe(message => this.message = message);
    // this.postid = this.message;
    // } else {
    //   this.postid = refreshpostid;
    // }
    this.postservice.getpostbyid(this.postid).subscribe(data => {
      this.post = data;
      // localStorage.setItem('refreshpostid', this.message);
    });

    this.usercommentsservice.getComments(this.postid)
      .subscribe( data => {
        this.Usercommentsmodel = data;
      });
    }
    autoGrowTextZone(e: any) {
      e.target.style.height = '0px';
      e.target.style.height = (e.target.scrollHeight + 25) + 'px';
    }
    clear() {
      this.txtnewcomment = '';
    }
    onCommentsChange(data: Usercommentsmodel[])
    {
      this.Usercommentsmodel = data;
    }
    onSubmit() {
      this.guid = Guid.create(); // ​​​​​Guid { value: 'bb90ef83-1a7e-42b1-90ba-39cdebb6366c' }​​​​​
      // tslint:disable-next-line: no-string-literal
      const Id = this.guid['value'];
      this.newcomment = {
      commentText: this.txtnewcomment,
      commentId: Id,
      parentId: '',
      postId: this.postid,
      userId: this.UserId,
      children: [],
      fileId: 2,
      created: null
  };
      this.usercommentsservice.addnewcomment(this.newcomment).subscribe(data => {
        console.log('new comment added to database');
        console.log(data);
        this.Usercommentsmodel = data;
        this.clear();
      });
    }
}

дочерний компонент html

        <div *ngFor="let comment of Usercommentsmodel; let i = index" [ngClass]="comment.parentId == 0 ? '' : 'offset-comment'" >
          <div class="comment-wrap">
                  <div class="photo">
                          <div class="avatar" style="background-image: url('https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg')"></div>
                  </div>
                  <div class="comment-block">
                      <div class="media-heading">
                          <h6><span class="badge badge-info">{{ comment.userId }}</span></h6>
                      </div>
                      <p class="comment-text">{{comment.commentText}}</p>
                      <div class="bottom-comment">
                                  <div class="comment-date">{{comment.created | dateAgo}}</div>
                                  <ul class="comment-actions">
                                          <li class="complain"><a href="#delete{{comment.commentId}}" data-toggle="collapse">delete</a></li>
                                          <li class="reply"><a href="#reply{{comment.commentId}}" data-toggle="collapse">Reply</a></li>
                                  </ul>
                      </div>
                  </div>

          </div>
           <div id="delete{{comment.commentId}}" class="collapse hide bottom-comment cmtreply"> 
              <div class="alert alert-light">
                  <strong>Confirm!</strong> Are you sure?..
                  <button type="button" id="{{comment.commentId}}" (click)="deletecomment($event)" class="btn btn-outline-secondary btn-sm mr-1">yes</button>
                  <a href="#delete{{comment.commentId}}" class="btn btn-outline-secondary btn-sm" data-toggle="collapse">No</a>
                </div>
           </div>
            <div id="reply{{comment.commentId}}" class="collapse hide bottom-comment cmtreply">      
              <textarea name="comment" [(ngModel)]="txtreplycomment" class="comment-block" style="width: 100%;" cols="30" rows="2" placeholder="Add comment..."></textarea>
              <input type="hidden" value="{{comment.commentId}}" id="{{comment.id}}">
              <button type="submit" (click)="replytocomment($event)" class="btn btn-outline-secondary btn-sm float-right my-2">Reply</button>    
              <a href="#reply{{comment.commentId}}" class="btn btn-outline-secondary btn-sm float-right my-2 mr-1" data-toggle="collapse">Cancel</a> 
            </div>
          <app-childcomments [Usercommentsmodel]="comment.children"></app-childcomments>
      </div>

***Child component.ts file***

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Guid } from 'guid-typescript';

import { Usercommentsmodel} from '../../_models';
import { Usercommentsservice } from '../../_services';

@Component({
  selector: 'app-childcomments',
  templateUrl: './childcomments.component.html',
  styleUrls: ['./childcomments.component.css']
})
export class ChildcommentsComponent implements OnInit {
  @Input() Usercommentsmodel: Usercommentsmodel[];
  @Output() CommentsChange = new EventEmitter<Usercommentsmodel[]>();
  postid = '';
  UserId = '';
  guid: Guid;
  replycomment: Usercommentsmodel;
  txtreplycomment: string;
  public isCollapsed = true;
  ngOnInit() {
    this.postid = localStorage.getItem('postid');
    this.UserId = localStorage.getItem('UserId');
    // if (this.Usercommentsmodel) {
    //   this.Usercommentsmodel.forEach(comment => LessOffsetComments.updateOffset(comment));
    // }
  }
  constructor(private usercommentsservice: Usercommentsservice) { }
  replytocomment(event: any) {
    // const carid = $(this).parent().find('input[type="hidden"]').val();
    const parentid = event.target.parentNode.childNodes[1].value;

    {
      this.guid = Guid.create(); // ​​​​​Guid { value: 'bb90ef83-1a7e-42b1-90ba-39cdebb6366c' }​​​​​
      // tslint:disable-next-line: no-string-literal
      const Id = this.guid['value'];
      this.replycomment = {
      commentText: this.txtreplycomment,
      commentId: Id,
      parentId: parentid,
      postId: this.postid,
      userId: this.UserId,
      children: [],
      fileId: 2,
      created: null
  };
      this.usercommentsservice.addnewcomment(this.replycomment).subscribe(data => {
        console.log('new reply comment added to database');
        console.log(data);
        this.Usercommentsmodel = data;
      });
    }
  }
  deletecomment(event: any) {
    const commentid = event.target.parentNode.childNodes[2].id;
    const commentdata: any = new FormData();
    commentdata.append('commentid', commentid);
    commentdata.append('userid', this.UserId);
    commentdata.append('postid', this.postid);
    this.usercommentsservice.deletecomment(commentdata).subscribe(data => {
      console.log('comment deleted');
      console.log(data);
      //this.Usercommentsmodel = data;
      this.CommentsChange.emit(data);
    });
  }

}

Json переплет json просмотр данных