如何在angular的ng-multiselect-dropdown中添加自定义按钮

Question

我想在 ng-multiselect-dropdown 中添加按钮，如用于关闭下拉列表的 ok 按钮，然后全选和取消选择按钮进入下拉列表

我正在使用 Angular 8，并且使用下面的 ng-multiselect-dropdown 是代码片段。

这就是我现在的管理方式，但实际要求是我想在下拉列表中添加自定义按钮，就像每个下拉列表中的可搜索文本框一样。

我认为这可能是可能的，但我不知道该怎么做，我尝试了互联网上的所有选项，但仍然卡住了。

您的宝贵选择/出路和评论真的很感激。

app.component.html 代码

 <div class="card" style="padding-bottom: 5px;"> 

        <a style="padding-left: 10px" (click)="ConcerGridFilterReset()" routerLink="/" >Reset Filter</a>

        <pagination-controls style="padding-left: 30%"  (pageChange)="p = $event" id="foo"></pagination-controls>
            <div class="table-responsive" style="height:550px">
                    <table class="table table-bordered" style="max-height: 100px">
                      <thead>
                        <tr bgcolor="#e50000" style="color: white;text-align: center;">
                            <!-- <th></th> -->
                          <th>Concern ID</th>
                          <!-- <th>Issue ID</th> -->
                          <th>Local Market
                                <div style="width: 150px" >

                                        <ng-multiselect-dropdown name="drLocalMkt" style="font-size: 14px;font-weight: normal;"
                                        [placeholder]="'--Select--'"
                                        [data]="drLocalmarketList"
                                        [(ngModel)]="drSelectedLclMktsFilter"
                                        [settings]="filterdropdownSettings"
                                        (onSelect)="onLclItemSelectForFilter($event)"
                                        (onDeSelect)="onLclItemSelectForFilter($event)"

                                        >


                                      </ng-multiselect-dropdown>

                                      <!-- (onDeSelect)="fnUnselectLclMktforFilter()" -->
                                    </div>
                          </th>
                          <th>Process
                                <div style="width: 150px" >
                                        <ng-multiselect-dropdown name="drProcess" style="font-size: 14px;
                                        font-weight: normal;"
                                        [placeholder]="'--Select--'"
                                        [data]="drProcessList"
                                        [(ngModel)]="drSelectedProcessFilter"
                                        [settings]="filterdropdownSettings"
                                        (onSelect)="onProcessItemSelectForFilter($event)"
                                        (onDeSelect)="onProcessItemSelectForFilter($event)"                                       
                                         >
                                      </ng-multiselect-dropdown>
                                    </div>
                          </th>
                          <th>Description</th>
                          <th>Concern Status</th>
                          <th>Raised By</th>
                          <th>Raised Date</th>
                          <th>Assigned To</th>
                          <!-- <th>IsActive</th>    -->
                          <!-- <th>Edit</th> -->
                        </tr>
                      </thead>
                      <tbody *ngFor="let item of ConcernGrid |paginate: {id: 'foo', itemsPerPage: 10, currentPage: p}">
                        <tr  (click)="SelectedTableRowConcernList(item)" [ngClass] = "{'SelectedRow' : item.ConcernID == SelectedConcernID}">
                         <!-- <td>
                             <i  class="fa fa-plus" ></i> 
                         </td> -->
                          <td>{{item.Code}}</td>
                          <!-- <td>{{item.IssueCode}}</td> -->
                          <td>{{item.LocalMarketName}}</td>
                          <td>{{item.ProcessName}}</td>
                          <td>{{item.Description}}</td>
                          <td>{{item.ConcernStatusName}}</td>
                          <td>{{item.CeatedByName}}</td>
                          <td>{{item.CREATEDDATE | date:'MM/dd/yyyy'}}</td>
                          <td>{{item.AssignToName}}</td>
                          <!-- <td>{{item.UserEmailID}}</td> -->
                          <!-- <td><button (click)="fnEditConcern(item)" type="button" class="btn btn-primary btn-sm">Edit</button></td> -->
                        </tr>
                      </tbody>
                      </table>
                </div>
       </div> 

App.component.ts 代码是

 ngOnInit() {
    this.dropdownSettings={
      singleSelection: false,
      idField: 'ID',//item.ID
      textField: 'Text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 3,
      allowSearchFilter: false,
      closeDropDownOnSelection:false,
      enableCheckAll:false
    };
    this.filterdropdownSettings = {
      singleSelection: false,
      idField: 'ID',//item.ID
      textField: 'Text',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 0,
      allowSearchFilter: true,
      closeDropDownOnSelection:true,
      enableCheckAll:false,
      maxWidth:400,

      Style:"maxWidth:600px"
    }
    this.fnLocalMarketDropdown();this.fnProcessDropdown();this.fnConcernStatusDropdown();
  }

作为参考，我正在显示我的页面的图像。

Answer 1

我很确定你运气不好。 您可以在下面看到的是 ng-multiselect-dropdown 的实际实现。

它由搜索栏、checkall 和带有文本的项目组成。

  <div class="dropdown-list" [hidden]="!_settings.defaultOpen">
    <ul class="item1">
      <li (click)="toggleSelectAll()" *ngIf="_data.length > 0 && !_settings.singleSelection && _settings.enableCheckAll && _settings.limitSelection===-1" class="multiselect-item-checkbox" style="border-bottom: 1px solid #ccc;padding:10px">
        <input type="checkbox" aria-label="multiselect-select-all" [checked]="isAllItemsSelected()" [disabled]="disabled || isLimitSelectionReached()" />
        <div>{{!isAllItemsSelected() ? _settings.selectAllText : _settings.unSelectAllText}}</div>
      </li>
      <li class="filter-textbox" *ngIf="_data.length>0 && _settings.allowSearchFilter">
        <input type="text" aria-label="multiselect-search" [readOnly]="disabled" [placeholder]="_settings.searchPlaceholderText" [(ngModel)]="filter.text" (ngModelChange)="onFilterTextChange($event)">
      </li>
    </ul>
    <ul class="item2" [style.maxHeight]="_settings.maxHeight+'px'">
      <li *ngFor="let item of _data | multiSelectFilter:filter; let i = index;" (click)="onItemClick($event,item)" class="multiselect-item-checkbox">
        <input type="checkbox" aria-label="multiselect-item" [checked]="isSelected(item)" [disabled]="disabled || (isLimitSelectionReached() && !isSelected(item)) || item.isDisabled" />
        <div>{{item.text}}</div>
      </li>
      <li class='no-data' *ngIf="_data.length == 0">
        <h5>{{_settings.noDataAvailablePlaceholderText}}</h5>
      </li>
    </ul>
  </div>

您可以执行以下操作之一：

1. 从此处的链接获取代码，并进行更改以添加您的自定义控件和逻辑。 这不是一个非常复杂的控制，所以它应该太难了。 请注意，您将来会丢失任何更新，您必须自己维护。

2. Fork github repo 或使用建议的解决方案创建拉取请求。

3. 自己创建一个多选，做你想做的事（不建议做，因为多选不是一件容易的事）

4. 使用 ng-select2 可以完全编辑模板。 在此处检查演示以确保它是否适合您。