請求服務

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);
  //       }
  //     })
  //   })
  // }