时间戳

首页 > 解决方案 > 如何使用角度材料在下拉列表中创建树视图？

javascript - 如何使用角度材料在下拉列表中创建树视图？

问题描述

谁能告诉我，如何在下拉菜单中创建树视图。下拉值将从 json 的 rest api 调用中获取，如下所示。并且 subchild 也可能包含更多级别的 child。

我必须在此处执行自动建议以执行来自父级和子级的过滤器。

 VehicleList = [
      {
        parent: "audi",
        child: [{
          type: 'G-audiA',
          subchild: [{
              id: 1,
              name: 'type audi A1'
          }, {
              id: 2,
              name: 'type audi A2'
          }]
        }, {
          type: 'G-audiB',
          subchild: [{
              id: 1,
              name: 'type audi B1'
          }, {
              id: 2,
              name: 'type audi B2'
          }]
        }]
      }, {
        parent: "bmw",
        child: [{
          type: 'G-bmwA',
          subchild: [{
              id: 1,
              name: 'type bmw A1'
          }, {
              id: 2,
              name: 'type bmw A2'
          }]
        }, {
          type: 'G-bmwB',
          subchild: [{
              id: 1,
              name: 'type bmw B1'
          }, {
              id: 2,
              name: 'type bmw B2'
          }]
        }]
  }]

任何人的帮助将不胜感激！！！

标签： javascriptangulartypescriptangular-material

解决方案

基于Angular Material Tree docs的第一个例子，我设法建立了一个下拉菜单，里面有一个树结构，如下所示：

显示树的技巧是添加一个禁用/空选项。我用它作为标签。树取自他们的示例，所以我根本没有修改它，您可以修改节点结构以匹配您自己的。

为了在下拉列表的标签中显示所选项目，您可以创建一个方法，该方法将返回所选项目的字符串，因为它们的SelectionModel对象具有 selected 属性，该属性将返回所有选定的节点。

/** The selection for checklist */
checklistSelection = new SelectionModel<TodoItemFlatNode>(
    true /* multiple */
);

为了从树中获取选定的项目：

return this.checklistSelection.selected.map(s => s.item).join(",");

对于过滤部分，我认为您可以查看此答案。希望这有帮助！

堆栈闪电战

编辑：如果您选择一个孩子，即使没有选择所有孩子，父母也会被选中并添加到 SelectionModel 中。如果您不希望此行为评论该函数descendantsPartiallySelected。这不会选中复选框，因此除非选择所有子级，否则不会在 SelectionModel 中添加父级

推荐阅读