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

谁能告诉我，如何在下拉列表中创建树视图。下拉值将作为json从RESTAPI调用中获取，如下所示。子孩子也可能包含一个更高级别的孩子

我必须在这里执行自动建议，以执行来自父级以及子级的筛选

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

---

任何人的帮助都将被感激

根据文档中的第一个示例，我设法建立了一个下拉列表，其中包含一个树状结构，如下所示：

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

为了在下拉列表的标签中显示选定项目，您可以创建一个方法，该方法将以字符串形式返回选定项目，因为其

SelectionModel

对象具有将返回所有选定节点的selected属性

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

关于过滤部分，我想你可以看一下。 希望这是有帮助的

---

编辑：如果选择一个子项，则父项也会被选中并添加到SelectionModel中，即使它的所有子项都未被选中。如果不希望出现这种行为，请对函数

子体部分选中进行注释。这不会选中复选框，因此除非选择了所有子项，否则将不会在SelectionModel中添加父项
@loana Voicu无法按父项/子项实现筛选。键入父名称时，还应显示子名称列表。同样，如果我们键入子名称，父名称也将被过滤。？我通过在ChecklistDatabase类中添加一个实际过滤树的方法来更新stackblitz。该方法在输入更改时被调用。我还稍微修改了树结构。请看一看新的解决方案：）@Loana这里如果我选择父级/二级子级，我只需要在占位符中绑定三级子级名称。我无法得到仅绑定第三级的解决方案。你能告诉我这可能吗？
return this.checklistSelection.selected.map(s => s.item).join(",");