如何使用Angular Tree创建自定义下拉列表?

时间:2019-03-14 06:03:04

标签: angular typescript treeview

我需要使用“ angulartree--component”库做一个下拉两级列表:“ ^ 4.1.0” library link。 目前,我有一个添加新项目时填充的项目列表。列表中的每个元素都应为下拉列表。

  • 项1
    • detaildItems1
  • items2
    • detaildItems2 ...

如何制作此列表结构?

export class Items extends BaseModelVersion {
    name: string;
    detailItems: Array<DetailItems>;
    }
    
    export class DetailItems extends BaseModelVersion {
      address: string;
      description: string;
}

export class ItemsComponent {
    currentItem: Items;
    items: Array<Items>;
    
    nodes = [
    {
      name: this.currentItems,
      children: this.currentItems.detailItems
    }
  ];

  options = {
    childrenField: 'nodes',
    getChildren: (node: TreeNode) => {
      return node.data.detailItems;
    },
    isExpandedField: 'expended',
    nodeHeight: 56,
    allowDrag: false,
    allowDrop: false,
    useVirtualScroll: false };
  
   constructor(public itemsFacade: ItemsFacade) {}
   
     ngOnInit() { this.items = this.itemsFacade.getItems();}
<md-list>
<tree-root [nodes]="nodes" [options]="options">
  <ng-template #treeNodeTemplate let-node let-index>
    <md-list-item md-line>
      <span>{{node.data.name}}</span>
      <tree-node-expander [node]="node"></tree-node-expander>
    </md-list-item>
    <tree-root-children>
      <md-list-item>
        <span>{{node.data.address}}</span>
      </md-list-item>
    </tree-root-children>
  </ng-template> 
</tree-root>  
</md-list>

0 个答案:

没有答案