Как создать древовидное представление внутри раскрывающегося списка, используя материал angular?

Question

Кто-нибудь может сказать мне, как создать древовидную структуру внутри выпадающего списка. Выпадающие значения будут получены из вызова api rest как json следующим образом. И дочерний ребенок может также содержать еще один уровень дочернего элемента.

Мне нужно сделать здесь автоматическое предложение, чтобы выполнить фильтр как с родительского, так и с дочернего уровня.

 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 дерева материалов документов, мне удалось создать раскрывающийся список с древовидной структурой внутри, например:

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 which will return the selected items a a string as their SelectionModel object has the selected property which would return all selected nodes.

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

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

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

ответ . Надеюсь, это будет полезно!

Stackblitz