Angular：将 httpClient Json 列表响应映射到 Typescript Class

Question

我正在尝试将 Json 响应映射到 Angular 中的 Typescript class。

Json 响应：[{"id":1,"nodeName":"Root","parentNodeId":null,"value":100.0,"children":[]}]

虽然我在本地运行时没有看到错误，但是当我尝试在 stackblitz 上打印时列表仍然未定义，我看到以下错误：

error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad

尽管我已经在 Json Lint 上检查过我的 Json 它是有效的 Json。

打字稿Class:

export class Node {
 id?: number;
 nodeName?: string;
 parentNodeId?: any;
 value?: number;
 children?: any[];
}

Component.ts代码：

public nodes: Node[];
constructor(private nodeService: NodeService) {}

getAllNodes() {
  this.nodeService.getListOfNodes().subscribe((data) => {
  console.log('response==>', data);
  this.nodes = data;
});
 console.log('nodes ====>', this.nodes);
}

StackBlitz Editor Url and StackBlitz Application Url

Answer 1

尝试在与 app 文件夹相同的级别上创建一个新文件夹 assets，然后将 api.json 文件移动到 asset 文件夹中。

接下来，像这样修改节点检索：

getListOfNodes(): Observable<Node[]> {
    return this.httpClient.get<Node[]>('/assets/api.json')
}

现在应该加载节点。

Angular：将 httpClient Json 列表响应映射到 Typescript Class

Angular: Map the httpClient Json list response to Typescript Class

json

angular

typescript

angular-httpclient