Angular4 - 可观察的地图JSON到特定对象

Question

我收到以下JSON，我试图映射到我定义的对象

{
   "nodes":[
      {
         "branchId":1,
         "branchLevel":1,
         "branchOrder":1,
         "branchDescription":"BR01",
         "leaves":[
            {
               "clTechForm":"TF01",
               "branchId":1,
               "leafOrder":1
            },
            {
               "clTechForm":"TF02",
               "branchId":1,
               "leafOrder":2
            }
         ]
      }          
   ]
}

我有以下TypeScript类，我试图映射我上面收到的JSON：

export class TreeMapper{
  constructor(public nodes: BranchMapper[]) {
  }
}

export class BranchMapper{
  constructor(public id: number, public name: string, public children: TechnicalFormMapper[]  ) {
  }
}

export class TechnicalFormMapper{
  constructor(public id: number, public name: string) {
  }
} 

我想将收到的JSON映射到以下JSON。

{
   "nodes":[
      {
         "id":1,
         "name":"BR01",
         "children":[
            {
               "name":"TF01",
               "id":1,
            },
            {
               "name":"TF02",
               "id":1,
            }
         ]
      }          
   ]
}

这是我对后端的HTTP调用：

  getTrees(): Observable<TreeMapper[]> { 
    return this.http.get('some url').map(
      (response: Response) => (response.json())
    ).catch(
      (error: Response) => {
        return Observable.throw('Nodes Fetch Failed');
      }
    );
  }

请帮我映射到我上面定义的Object。任何帮助，将不胜感激。

Answer 1

你不需要map，就这样做

在service.ts

getTrees(): Observable<TreeMapper[]> { 
    return this.http.get('some url');
  }

在component.ts中

treemappers: TreeMapper[];

getTrees() {
  this.service.getTress().subscribe(data => this.treemappers = data);
//write catch code
}

---

异步管道

如果你没有对从http呼叫接收到的数据进行任何处理，请使用async管道，它将为你工​​作

在service.ts

getTrees(): Observable<TreeMapper[]> { 
    return this.http.get('some url');
  }

在component.ts中

treemappers: Observable<TreeMapper[]>;

getTrees() {
  this.service.getTress();
//write catch code
}

在component.html中

<table>
 //rest of code
 <tr *ngFor="let mapper of treemappers | async">
 //rest of code
</table>