角度4 ngx-treeviewのjsonレスポンスとの統合

Question

私は現在、角度4を新しく使用しており、ツリー構造を得るためにngx-treeview（https://www.npmjs.com/package/ngx-treeview）を使用しています。バインドできる静的データを使用して、ツリーを表示します。

しかし、それゆえツリー構造を取得するために、残りのサービスを使用する必要がありますがここで

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

iは

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

角度取得していJSON応答であるNGX-ツリービューから同様のクラスツリービューアイテムを作成しましたサービス：

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

角度コンポーネント

私は

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) 

ない間違って起こっているかを理解することを得ているそう

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

。助けていただきありがとうございます。

Answer 1

あなたのコードにはitemsとは何ですか？なぜあなたはそれに3つのプロパティを持つTreeviewItemクラスを作成しましたか？新しいTreeviewItem型を作成してjsonを動作させるためにキャストしましたか？すでにTreeviewItemがあるので、あなたはそれが必要だとは思わない。

とにかく、TreeviewItemにキャストする代わりにnew TreeviewItem(json)（jsonはサーバーから取得するjson文字列）を試してみてください。しかし、サービスではなくコンポーネントでこれを行います。サービス中のキャスティングを取り外します。返品はanyのままにしておいてください。 ところで、あなたがキャストをするならば、それはサービスではなくコンポーネントで行うべきです。すべてのリクエストでツリービューのみを取得する場合を除き、より効率的でなければなりません。

私はプロではありませんが、可能であることを知っているからといってキャストを使用しないでください。オブジェクトを作成する方法がある場合は作成する必要があります。ちなみに、新しいアイテムを作成する例のドキュメントがあります。

Answer 2

私はこのコンポーネントの作者です。

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

、その後、コンポーネントにリストを結合： あなたは、ツリービューアイテムのリストにあなたのJSONをマップする必要があります。

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]; }