使用ngx-treeview的具有动态json的复选框层次结构

如何解决使用ngx-treeview的具有动态json的复选框层次结构

我正在尝试使用动态json响应实现ngx-treeview类UI。但这给了我如下错误：

not assignable to type treeitem

下面是我的json：

   {
  "id": "2","parentId": "0","value": "banks","children": [
    {
      "id": "54","parentId": "2","value": "MasterCard","children": [
        {
          "id": "5","parentId": "54","value": "US branch","children": [],"level": 2,"deletable": false
        },{
          "id": "56","parentId": "UK branch","value": "Cognition","children": [
            {
              "id": "51","parentId": "56","value": "Manager dept","level": 3,"deletable": false
            },{
              "id": "52","value": "Technical dept","deletable": false
            }
          ],"deletable": false
        }
      ],"level": 1,"deletable": false
    },{
      "id": "74","value": "e-Zest Banglore","deletable": true
    },{
      "id": "75","value": "Axis","children": [
        {
          "id": "77","parentId": "75","value": "Axis india","deletable": false
    }
  ],"level": 0,"deletable": false
}

我的component.ts：

  import { TreeviewItem,TreeviewConfig } from 'ngx-treeview';
  ...
  dropdownEnabled = true;
  items: TreeviewItem[];
  values: number[];
  config = TreeviewConfig.create({
    hasAllCheckBox: true,hasFilter: false,hasCollapseExpand: true,decoupleChildFromParent: false,maxHeight: 250
  });

  ngOninit(){
    this.items = this.getHierarchcategories();
  }

  getHierarchcategories(): TreeviewItem[] {
        const companydata = new TreeviewItem({
      {
        "id": "2","value": "e-Zest","children": [
          {
            "id": "54","children": [
              {
                "id": "5","value": "hi","deletable": false
              },{
                "id": "56","children": [
                  {
                    "id": "51","value": "Technotica 2","deletable": false
                  },{
                    "id": "52","value": "Techno3","deletable": false
                  }
                ],"deletable": false
              }
            ],"deletable": false
          },{
            "id": "74","deletable": true
          },{
            "id": "75","value": "e-Zest Pune","children": [
              {
                "id": "77","value": "e-Zest Hinjewdi","deletable": false
          }
        ],"deletable": false
      }
    });

    return [companydata];
  }

我的component.html如下所示：

  <ngx-treeview
    [config]="config"
    [items]="items"
  >
      </ngx-treeview>

通过运行此代码，我得到this错误。我们可以用这种json格式实现树状视图吗？谢谢.. !!

解决方法

构造函数new TreeViewItem(item)要求参数item满足接口TreeItem；该界面是：

interface TreeItem {
    text: string;
    value: any;
    disabled?: boolean;
    checked?: boolean;
    collapsed?: boolean;
    children?: TreeItem[];
}

（source）

这里有两件事情出了问题，一件事比一件事容易解决。一个简单的方法是，您的JSON包含不属于TreeItem接口的一部分的其他属性。这是您的屏幕截图中的property id does not exist on interface TreeItem错误的来源。

仅当在函数调用中创建对象时，附加属性才是问题。因此，您可以单独定义JSON，该错误就会消失。

 const myJson = { /** your data here **/ }; 
 const companydata = new TreeviewItem(myJson);

不幸的是，现在您遇到第二个错误，这是一个更困难的错误。界面TreeItem要求树中的每个项目都具有属性value，而属性text却没有。为了传递到TreeviewItem构造函数中，您将需要映射JSON，以使其在每个节点上都具有此缺少的{text: string}属性。