解决异步加载数据的问题。

请求服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Result } from '../model/result';
import { Dic } from './../model/dic.model';

@Injectable({
    providedIn: 'root'
})
export class DicService {
    private apiurl = 'api/dictionarydetail/getAll';  // URL to web api
    private allDicList: Array<Dic> = [];
    constructor(private http: HttpClient) {
        // 初始化数据字典
        // this.getAllDicList()
    }
    /**
    * 根据数据字典代码获取相应的字典数据列表
    * @param dicCode 数据字典代码
    */
    public getDicDetailList(dicCode: string) {
        return new Promise((resolve, reject) => {
            if (this.allDicList.length > 0) {
                resolve(this.filterAllList(dicCode))
            } else{
                this.getAllDicList(dicCode, resolve)
            }
        })
    }
    private getAllDicList(dicCode: string, callback) {
        this.http.get<Result>(this.apiurl).subscribe(res => {
            if (res.rlt === 0) {
                this.allDicList = res.datas;
                callback(this.filterAllList(dicCode))
            } else if (res.rlt === 1) {
                console.log("系统异常");
            }
        })
    }
    private filterAllList(dictCode: string): Dic[] {
        return this.allDicList.filter(element => element.dictCode == dictCode);
    }

    /**
     * 第二种方案解决异步获取数据执行顺序，添加两个回调函数，在回调函数一执行完成之后，再去第二个回调函数再次读取数据，
     * 并把的到的父数据和子数据拼接成树
     */
    // public getDicDetailList1(dicCode: string, callback, callback1?, errcallback?) {
    //     if (this.allDicList.length > 0) {
    //         callback(this.filterAllList(dicCode))
    //         if (callback1) {
    //             callback1('list > 0')
    //         }
    //     } else {
    //         this.getAllDicList1(dicCode, callback, callback1)
    //     }
    // }

    // private getAllDicList1(dicCode: string, callback, callback1?) {
    //     this.http.get<Result>(this.apiurl).subscribe(res => {
    //         if (res.rlt === 0) {
    //             this.allDicList = res.datas;
    //             callback(this.filterAllList(dicCode))

    //             if (callback1) {
    //                 callback1('list < 0 ')
    //                 //    this.getDicDetailList1('',()=>{})
    //             }
    //         } else if (res.rlt === 1) {
    //             console.log("系统异常");
    //         }
    //     })
    // }
}

ngOnInit() {
    this.genTree(）；
  }
/**
   * 用promise 的方法去顺序执行，拿到先异步加载的数据，然后再拼接数据
   */
  private genTree() {
    console.log('第一步');
    this.dicService.getDicDetailList('DM_MLZL')
      .then((list: any) => {
        console.log('第二步');
        this.mlzlDicList = list;
      }).then(() => {
        console.log('ddd3');
        this.dicService.getDicDetailList('DM_CPZL')
          .then((list: any) => {
            console.log('ddd5')
            this.cpzlDicList = list;
            this.mlzlDicList.forEach(ele => {
              ele.children = ele.children || [];
              this.cpzlDicList.forEach(subEle => {
                if (ele.itemCode == subEle.pitemCode) {
                  ele.children.push(subEle);
                }
              })
            })
          })
      })
  }

  /**
 * 定义第二种方案去解决异步获取数据的问题，就是用两个回调函数的顺序执行。
 */
  // private genTree1() {
  //   this.getMLZLList()
  // }

  // getMLZLList() {
  //   this.dicService.getDicDetailList1('DM_MLZL', (arr: Dic[]) => {
  //     console.log('第一步')
  //     // console.log('arr', arr);
  //     this.mlzlDicList = arr;
  //   }, (str: string) => {
  //     console.log('我在第一步后面', str);
  //     this.getCPZLList();
  //   })
  // }

  // getCPZLList() {
  //   this.dicService.getDicDetailList1('DM_CPZL', (arr: Dic[]) => {
  //     console.log('第二步de diyibu');
  //     console.log('arr', arr);
  //     this.cpzlDicList = arr;
  //   }, (str: string) => {
  //     console.log('我在第二步de diyibu后面', str);
  //     this.forEachTest();
  //   })
  // }

  // private forEachTest() {
  //   console.log('第三步');
  //   this.mlzlDicList.forEach(ele => {
  //     // console.log('第四步');
  //     ele.children = ele.children || [];
  //     this.cpzlDicList.forEach(subEle => {
  //       if (ele.itemCode == subEle.pitemCode) {
  //         ele.children.push(subEle);
  //       }
  //     })
  //   })
  // }

 ngOnInit() {
    // 全部分类 树级结构
    this.genTree();
  }
 private genTree() {
    this.dicService.getDicDetailList('DM_MLZL')
      .then((list: any) => {
        console.log('ddd5')
        this.mlzlDicList = list;
      })
  }

或者第二种回调的方案

 // private genTree1() {
  //   this.dicService.getDicDetailList1('DM_MLZL', (arr: Dic[]) => {
  //     console.log('第一步')
  //     console.log('arr', arr);
  //     this.mlzlDicList = arr;
  //   })

  //   this.dicService.getDicDetailList1('DM_CPZL', (arr: Dic[]) => {
  //     console.log('第二步');
  //     console.log('arr', arr);
  //     this.cpzlDicList = arr;
  //   })

  //   this.forEachTest();
  // }

  // private forEachTest() {
  //   console.log('第三步');

  //   this.mlzlDicList.forEach(ele => {
  //     // console.log('第四步');
  //     ele.children = ele.children || [];
  //     this.cpzlDicList.forEach(subEle => {
  //       if (ele.itemCode == subEle.pitemCode) {
  //         ele.children.push(subEle);
  //       }
  //     })
  //   })
  // }