無法在Angular2中撥打http服務？

Question

嗨，我正在Angular 5中開發Web應用程序。我正在生成樹狀結構。 我正在關注https://github.com/500tech/angular-tree-component/blob/master/example/cli/src/app/async/async.component.ts 。 我正在進行API調用以動態獲取數據並顯示為樹。 我的方法適用於靜態數據，但不適用於在進行http調用后獲取動態數據。

以下代碼適用於靜態數據。

asyncChildren = [
    {
      name: 'child1',
      hasChildren: true
    }, {
      name: 'child2'
    }
  ];

 getChildren(node: any) {
    const newNodes = this.asyncChildren.map((c) => Object.assign({}, c));

    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(newNodes), 1000);
    });
  }

在上面的代碼中，當我調用service而不是this.asyncChildren時，我的代碼將無法工作。 下面是我的實現。

getChildren(node: any) {
    const newNodes =  this.ChildTranslator().map((c) => Object.assign({}, c));
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(newNodes), 1000);
    });
  }

只要有子節點，就會調用上述方法。 因此，我代替this.asyncChildren來調用this.ChildTranslator方法，該方法進行http服務調用並獲取JSON並將數據轉換為所需格式。 下面是ChildTranslator方法的實現。

 public string ChildTranslator(){
    this.nodeservice.GetChildNodes().subscribe(data=>{
    this.asyncChildren= this.transformer(data);
    return this.asyncChildren;
    });
}

變壓器代碼。

  public string transformer(data:any){

    this.asyncChildren=[];
    let results=data;
    for (const key in results) {
      if (results[key] instanceof Array) {
        const containerTyp2 = {name: '', hasChildren: false,};

        containerTyp2.name = key;
        containerTyp2.hasChildren = true;

        this.asyncChildren.push(containerTyp2);
     } else {
        const object = {name: ''};

        const containerTyp1 = {name: '', children: []};
        object.name = results[key];
        containerTyp1.name = key;
        containerTyp1.children.push(object);
        this.asyncChildren.push(containerTyp1);
    }
    this.tree.treeModel.update();
  }
return this.asyncChildren;
  }

上面的代碼向我彈出以下錯誤。

無法讀取未定義的屬性“地圖”

有人可以幫我做這個工作嗎？ 我可以知道以上代碼中缺少的內容嗎？ 任何幫助將不勝感激。 謝謝。

Answer 1

嘗試這個 ：

getChildren(node: any) {

    return new Promise((resolve, reject) => {
        this.nodeservice.GetChildNodes().subscribe(data=>{
            this.asyncChildren= this.transformer(data);
            const newNodes =  this.asyncChildren.map((c) => Object.assign({}, c));
            setTimeout(() => resolve(newNodes), 1000);
        });        
    });
}

Answer 2

像這樣更改您的getChildren方法：

getChildren(node: any) {
    const newNodes =  this.ChildTranslator().subscribe(data=>{
    this.asyncChildren= this.transformer(data);
    this.asyncChildren.map((c) => Object.assign({}, c));
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(newNodes), 1000);
    });
   });
  }

同樣，從ChildTranslator方法返回值是這樣的：

 public string ChildTranslator(){
    return this.nodeservice.GetChildNodes();
}