javascript - How to create tree view inside the dropdown using angular material? - Stack Overflow

admin管理员组

文章数量:1323723

Can anyone tell me, how to create a tree view inside the drop down. The drop down values will be getting from rest api call as json as follows. And subchild may contains one more level of child as well.

I have to do auto suggestion here to perform the filter from parent as well as the child level too.

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

Anyone help will be appreciated!!!

Can anyone tell me, how to create a tree view inside the drop down. The drop down values will be getting from rest api call as json as follows. And subchild may contains one more level of child as well.

I have to do auto suggestion here to perform the filter from parent as well as the child level too.

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

Anyone help will be appreciated!!!

• javascript
• angular
• typescript
• angular-material

Share Improve this question Follow asked Aug 3, 2020 at 12:25 S.M.PriyaS.M.Priya 36411 gold badge55 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Based on the first example from the Angular Material Tree docs I managed to build up a drop-down with a tree structure inside like so:

The trick for displaying the tree is to add a disabled/empty option. I used it as a label. The tree is taken from their examples so I did not modify it at all, you can modify the node structure to match your own.

In order to display the selected items in the label of the drop-down, you can create a method that will return the selected items a string as their SelectionModel object has the selected property which would return all selected nodes.

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

And in order to get the selected items from the tree:

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

For the filtering part I think you can look over this answer. Hope this is helpful!

Stackblitz

Edit: If you select a child the parent gets selected too and added in the SelectionModel even if all its children are not selected. If you don't want this behaviour ment on the function descendantsPartiallySelected. This will not check the checkbox and so parents will not be added in SelectionModel unless all children are selected

本文标签： javascriptHow to create tree view inside the dropdown using angular materialStack Overflow