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

Question

谁能告诉我，如何在下拉列表中创建树视图。下拉值将从 rest api 调用作为 json 获取，如下所示。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'

          }]

        }]

  }]

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

Answer 1

基于Angular Material Tree文档中的第一个示例，我设法构建了一个下拉菜单，其中包含一个树结构，如下所示：显示树的技巧是添加禁用/空选项。我用它作为标签。该树取自他们的示例，所以我根本没有修改它，您可以修改节点结构以匹配您自己的。为了在下拉列表的标签中显示选定的项目，您可以创建一个方法，该方法将返回选定项目的字符串，因为它们的SelectionModel对象具有 selected 属性，该属性将返回所有选定的节点。/** The selection for checklist */checklistSelection = new SelectionModel<TodoItemFlatNode>(&nbsp; &nbsp; true /* multiple */);为了从树中获取选定的项目：return this.checklistSelection.selected.map(s => s.item).join(",");对于过滤部分，我认为您可以查看此答案。希望这会有所帮助！堆栈闪电战编辑：如果您选择一个子项，即使未选择其所有子项，父项也会被选中并添加到 SelectionModel 中。如果您不希望此行为对函数进行评论descendantsPartiallySelected。这不会选中该复选框，因此除非选择了所有子项，否则不会将父项添加到 SelectionModel 中