Question

我目前刚接触angular 4并使用ngx-treeview（https://www.npmjs.com/package/ngx-treeview）来获取树结构。使用能够绑定视图树的静态数据。

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

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

这是我得到的json回复

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

角度服务：

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)

这样做我

data.table

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

Answer 1

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

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

然后将列表绑定到组件。

Answer 2

代码中的items是什么？为什么要创建包含三个属性的TreeviewItem类？您是否尝试制作新的TreeviewItem类型并对其进行强制转换以使json正常工作？我认为你不需要它，因为已经有TreeviewItem。

无论如何，请尝试执行new TreeviewItem(json)（其中json是从服务器获取的json字符串），而不是转换为TreeviewItem。但是在组件中执行此操作，而不是在服务中。在使用中移除铸件。保留服务并返回any。顺便说一下，如果你做演员表，你应该在组件中而不是在服务中。应该更高效，除非你在每个请求中只获得树视图。

我不是专业人士，但我认为你不应该因为你知道这是可能的而使用演员。如果有一种创建对象的方法，你应该创建它。顺便说一句，文档中有一个创建新项目的例子。

Answer 3

我通过这样做得到了解决方案

ngOnInit() { 
   this.service.getTreeViewdata() 
      .subscribe( items => 
                     this.items = items, error => 
                        this.errorMessage = error, () => 
                           this.fillitemdata()
      ); 
      debugger;
}

private fillitemdata(): void { this.items = this.getData(); }

getData(): any[] { const itCategory = new TreeviewItem(this.items[0]); return [itCategory]; }

Answer 4

this.itemsList = data.map(value => {
            return new TreeviewItem({text: value.name, value: value.id, collapsed: true, children: filterChildren});
        });

使用map方法迭代并创建一个新的TreeView对象，并将json对象传递给构造函数。

Angular 4 ngx-treeview与json响应的集成

4 个答案: