无法在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);
});
}

在上面的代码中，当我调用服务而不是this.syncChildren时，我的代码将不起作用。下面是我的实现。

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

只要有子节点，就会调用上面的方法。所以，与其说是这个，不如说是孩子们。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;
}

上面的代码弹出下面的错误。

无法读取未定义的属性"map">

有人能帮我做这件事吗？我可以知道我在上面的代码中遗漏了什么吗？如有任何帮助，我们将不胜感激。非常感谢。

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