无法在 Angular2 中进行 http 服务调用？

Posted 2023-03-13

【中文标题】无法在 Angular2 中进行 http 服务调用？

【英文标题】：Unable to make http service call in Angular2?

【发布时间】：2019-01-01 21:04:18

【问题描述】：

您好，我正在使用 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;
  

上面的代码向我弹出以下错误。

无法读取未定义的属性“地图”

有人可以帮我完成这项工作吗？我可以知道我在上面的代码中缺少什么吗？任何帮助将不胜感激。谢谢你。

【问题讨论】：

ChildTranslator() 不返回值。

【参考方案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);
        );        
    );

【讨论】：

@Niranjan 随时

但唯一的问题是它不断调用 getChildren 方法一千次。

@Niranjan 什么一直在打电话getChildren ？

this.asyncChildren=this.transformer(data);这是继续打电话。我已经在上面发布了实现。

@Niranjan 你在哪里调用getChildren 方法？

【参考方案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();