Angular 4 ngx-treeview 与 json 响应集成

Question

我目前是 Angular 4 的新手，并使用 ngx-treeview( https://www.npmjs.com/package/ngx-treeview ) 来获取树结构。使用静态数据能够绑定(bind) View 树。

但需要使用其余服务来获取树结构，因此从 ngx-treeview 创建了一个类似的 TreeviewItem 类

public class TreeviewItem
{
    public string Text { get; set; }
    public int Value { get; set; }
    public bool Collapsed { get; set; }
    public TreeviewItem[] Children { get; set; }
} 

这是我得到的 json 响应

[{"text":"Core Fields","value":100,"collapsed":false,"children":null}]

Angular 服务:

return this.http.get(this.appHelpersSvc.apiAddress + 
"api/module/getStandardFields", { headers: httpHeaders })
.map((response:Response) => <TreeviewItem>response.json());

Angular 分量

itemsList: TreeviewItem[]; 
this.moduleService.getStandardFields().subscribe(data => {this.itemsList = data;}); 

这样做我得到

Uncaught TypeError: this.items[i].getCheckedItems is not a function
at TreeviewComponent.getCheckedItems (http://localhost:4001/main.bundle.js:42763:107)
at TreeviewComponent.raiseSelectedChange (http://localhost:4001/main.bundle.js:42745:34)
at TreeviewComponent.ngOnChanges (http://localhost:4001/main.bundle.js:42703:22)
at checkAndUpdateDirectiveInline (http://localhost:4001/vendor.dll.js:12160:19)
at checkAndUpdateNodeInline (http://localhost:4001/vendor.dll.js:13586:17)
at checkAndUpdateNode (http://localhost:4001/vendor.dll.js:13525:16)
at debugCheckAndUpdateNode (http://localhost:4001/vendor.dll.js:14228:59)
at debugCheckDirectivesFn (http://localhost:4001/vendor.dll.js:14169:13)

无法理解出了什么问题。感谢您的帮助。

Answer 1

我是这个组件的作者。您需要将 JSON 映射到 TreeviewItem 列表:

const list = items.forEach(item => new TreeviewItem(item));

然后将列表绑定(bind)到组件。