angular - 如何设计树形多选下拉菜单

Question

我需要以角度设计树样式下拉菜单。示例图像附在此处。当用户勾选列表项时，项目打印在标签上。

我需要像图片中一样添加子类别：N1、N1.1、N1.2。怎么做？

这是我现有的代码。我使用 Angular 多下拉菜单进行选择。我需要将此代码修改为树视图。在下拉列表中，第一项“北脊椎”具有子类别“N1”、“N1.1”、“N1.2”和“N1.3”。因此，与现有项目相同，当用户勾选时需要在标签上打印（请参阅附图）。当用户勾选每个项目将显示在标签上并可以从中删除。

<div class="col-sm-6 form-group">
            <label for="Building">Authorized Building</label>
            <ng-multiselect-dropdown 
                [placeholder]="'Select the Building'" 
                [settings]="dropdownSettings"
                [data]="dropdownList" 
                [(ngModel)]="selectedItems" 
                (onSelect)="onItemSelect($event)"
                (onSelectAll)="onSelectAll($event)">
            </ng-multiselect-dropdown>
        </div>

导出类 UserComponent 实现 OnInit {

  dropdownList: { item_id: number; item_text: string; }[] = [];
  selectedItems: { item_id: number; item_text: string; }[] = [];
  dropdownSettings : IDropdownSettings;

  constructor(public service: UserService) { }

  ngOnInit(): void {

   

    //dropdown list value
    this.dropdownList = [
      { item_id: 1, item_text:'North Spine'},
      { item_id: 2, item_text: 'Academics' },
      { item_id: 3, item_text: 'Staff Housing' },
      { item_id: 4, item_text: 'Student Hall' },
    ];
    this.selectedItems = [
      { item_id: 3, item_text: 'North Spine' },
      { item_id: 4, item_text: 'Academics' }
    ];
    
    this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 4,
      allowSearchFilter: true
    };

  }

 
  //dropdownlist
  onItemSelect(item: any) {
    console.log(item);
  }
  onSelectAll(items: any) {
    console.log(items);
  }

}

标签： angulartypescript