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

Question

У меня есть таблица данных, которая заполняется из json с использованием директивы * ngFor в angular,

[
    {
        "vmName": "sd-f43c-aafb",
        "appid": "161787",
        "appshortName": "AV for NAS",
        "description": "sample - testing ..",
        "env": "DEV",
        "orderID": "NO00009",
        "orderDate": "22/2/2020",
        "status":"success",
        "processors":"2",
        "memory":"16 GB",
        "harddisk":"50 GB",
        "RequestorSOEID": "BS26107",
        "operationalfarmName": "VRA Test Farm",
        "childData":[
            {
                "vmName": "sd-f43c-aafb",
                "orderDate": "22/2/2020",
                "status":"success"
            },
            {
                "vmName": "sd-f43c-aaxyz",
                "orderDate": "22/2/2020",
                "status":"failed"
            }
        ]
    }]

, которая выглядит следующим образом

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

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

это то, как я добавляю его, используя javascript в angular ngAfterViewInit () {

//to do  adding a check box 



    $('#jithesh').on('contextmenu', function (e) {
      var top = e.pageY - 10;
      var left = e.pageX - 90;
      $("#context-menu").css({
        display: "block",
        top: top,
        left: left
      }).addClass("show");
      return false; //blocks default Webbrowser right click menu
    }).on("click", function () {
      $("#context-menu").removeClass("show").hide();
    });

    $("#context-menu a").on("click", function () {
      $(this).parent().removeClass("show").hide();
    });


    $('#jithesh tbody').on('click', 'td.details-control', function () {
      var tr = $(this).closest('tr');
      var row = $("#jithesh").DataTable().row(tr);

      if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
      }
      else {
        // Open this row
        row.child(format(the json value here )).show();
        tr.addClass('shown');
      }
   });

    function format(children) {
       return '<table id="childdata" datatable class="row-border hover"  cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
          '<th></th>'+
          '<th>Vm Name</th>' +
          '<th>Status</th>' +
          '<th>Expiry Date</th>' +
        '</tr>' +
        '<tr *ngFor= "let d of children" > '+
          '<td> <input type="checkbox" /></td>'+
          '<td>{{d.vmName}}</td>' +
          '<td><img src="../assets/images/Start-icon.png" alt="Server Started" width="20" height="20"></td>' +
          '<td>d.orderDate</td>' +
        '</tr>' +

        '</table>';
    }

  }