-2

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

不可分配给类型 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",
              "children": [],
              "level": 3,
              "deletable": false
            },
            {
              "id": "52",
              "parentId": "56",
              "value": "Technical dept",
              "children": [],
              "level": 3,
              "deletable": false
            }
          ],
          "level": 2,
          "deletable": false
        }
      ],
      "level": 1,
      "deletable": false
    },
    {
      "id": "74",
      "parentId": "2",
      "value": "e-Zest Banglore",
      "children": [],
      "level": 1,
      "deletable": true
    },
    {
      "id": "75",
      "parentId": "2",
      "value": "Axis",
      "children": [
        {
          "id": "77",
          "parentId": "75",
          "value": "Axis india",
          "children": [],
          "level": 2,
          "deletable": false
        }
      ],
      "level": 1,
      "deletable": false
    }
  ],
  "level": 0,
  "deletable": false
}

我的组件.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",
        "parentId": "0",
        "value": "e-Zest",
        "children": [
          {
            "id": "54",
            "parentId": "2",
            "value": "MasterCard",
            "children": [
              {
                "id": "5",
                "parentId": "54",
                "value": "hi",
                "children": [],
                "level": 2,
                "deletable": false
              },
              {
                "id": "56",
                "parentId": "54",
                "value": "Cognition",
                "children": [
                  {
                    "id": "51",
                    "parentId": "56",
                    "value": "Technotica 2",
                    "children": [],
                    "level": 3,
                    "deletable": false
                  },
                  {
                    "id": "52",
                    "parentId": "56",
                    "value": "Techno3",
                    "children": [],
                    "level": 3,
                    "deletable": false
                  }
                ],
                "level": 2,
                "deletable": false
              }
            ],
            "level": 1,
            "deletable": false
          },
          {
            "id": "74",
            "parentId": "2",
            "value": "e-Zest Banglore",
            "children": [],
            "level": 1,
            "deletable": true
          },
          {
            "id": "75",
            "parentId": "2",
            "value": "e-Zest Pune",
            "children": [
              {
                "id": "77",
                "parentId": "75",
                "value": "e-Zest Hinjewdi",
                "children": [],
                "level": 2,
                "deletable": false
              }
            ],
            "level": 1,
            "deletable": false
          }
        ],
        "level": 0,
        "deletable": false
      }
    });

    return [companydata];
  }

我的 component.html 如下所示：

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

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

4

1 回答 1

0

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

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

（来源）

这里有两件事出了问题，一件比另一件更容易修复。最简单的是您的 JSON 包含不属于TreeItem接口的额外属性。这是property id does not exist on interface TreeItem您的屏幕截图中错误的来源。

只有在函数调用中创建对象时，额外的属性才会成为问题。所以你可以单独定义你的 JSON，那个错误就会消失。

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

不幸的是，现在您遇到了第二个错误，这是更难的一个。接口TreeItem要求树中的每个项目都有一个 property value，它有，也有一个 property text，你没有。为了被传递到TreeviewItem构造函数中，您需要映射您的 JSON，使其{text: string}在每个节点上都具有这个缺失的属性。

于 2020-10-01T12:41:41.827 回答