Angular+zorro implements unlimited menu

"table":[
    {
    "id": 1017.0,
    "menuName": "User Management",
        "child":[{
            "id": 23.0,
            "menuName": "User Maintenance",
            "child": [{
                    "id": 24.0,
                    "menuName": "User View",
                    "child":[{
                               "id": 25.0,
                            "menuName": "User Increase",
                               "child":[]
                    }]
                },
                {
                    "id": 25.0,
                    "menuName": "User Increase",
                    "child":[]
                }
            ]
        }]
    },
    {
    "id": 1018.0,
    "menuName": "WeChat Management",
    "child":[]    
    }
]

<!--
strHtml : Data to be displayed
innerhtmlpipe ：Add a pipeline，Let the data have styles
-->
<div [innerHTML]="strHtml | innerhtmlpipe"></div>

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Pipe({
  name: 'innerhtmlpipe'
})
export class InnerhtmlpipePipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
  transform(value): any {
      //style    return (value);
  }

}

import {Component, OnInit, ChangeDetectorRef} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';


@Component({
  selector: 'nb-uc-home',
  templateUrl: './',
  styleUrls: ['./'],
  animations: [slideInAnimation]
})

export class UcHomeComponent implements OnInit {
    //Define a strHtml    public  strHtml;
    //data    public menuArray = [];
    
     constructor(
         private homeService: HomeService，
         private ref: ChangeDetectorRef
     ) {}
    ngOnInit() {
           //Get data from the background interface and assign value to menuArray   ().subscribe(data => {
       //Assign data         = ;
           //Initialize the page         = '';
       //Transfer every data  for (let i = 0; i < ; i++) {
      
        const arr = [i];
//Start splicing page         += '<ul nz-menu [nzMode]="\'inline\'" style="height:auto" >';
           +='<li nz-submenu>';
         += '<div menuEvent title>';
         +='<span type="laptop">' +  + '</span>' ;
           +='</div>';
      // When traversing to the child, call a method and loop through the child.         += ();
         += '</li>';
           += '</ul>';
      }
        //Re-render the page after the data is loaded             ();
      });      
    }

    
 creatHtml(cArr): any {
    let str = '';
    for (let i = 0; i < ; i++) {
      str += '<ul>';
      str += '<li nz-menu-item';
      str += '<div menuEvent>';
      str += '<span>' + cArr[i].menuName +'</span>';
      str += '</div>';
      str += '</li>';
      str += '</ul>';
    }
     //Is there a subset there exists    if () {
      str += ();
    }
    ();
    return str;
  }
}