如何使用角度材质在下拉菜单中创建树形视图？

Question

谁能告诉我，如何在下拉菜单中创建树形视图。下拉值将从REST API调用获取为json，如下所示。并且子孩子可能还包含一个以上级别的孩子。

我必须在此处进行自动建议，才能从父级和子级执行过滤。

> todofrontenf@0.1.0 cucumber /Users/steinkorsveien/Development/todo/todofrontend
> cucumber-js src/features/**/*.feature --require=src/features/**/*.js --require-module @babel/register

ReferenceError: document is not defined
    at render (/Users/steinkorsveien/Development/todo/todofrontend/node_modules/@testing-library/react/dist/pure.js:82:5)
    at new AppWorld (/Users/steinkorsveien/Development/todo/todofrontend/src/features/worlds/AppWorld.js:11:60)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todofrontenf@0.1.0 cucumber: `cucumber-js src/features/**/*.feature --require=src/features/**/*.js --require-module @babel/register`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the todofrontenf@0.1.0 cucumber script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

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

Answer 1

基于Angular Material Tree文档中的第一个示例，我设法建立了一个内部具有树结构的下拉菜单，如下所示：

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

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

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

然后为了从树中获取所选项目：

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

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

Stackblitz