如何在angular中的ng multiselect下拉列表中添加自定义按钮
我想在ng multiselect下拉列表中添加按钮，如关闭下拉列表的ok按钮，并在下拉列表中选择all和unSelect按钮 我使用的是Angular 8，使用的是ng multiselect下拉列表，下面是代码片段 这就是我现在的管理方式，但实际需求是我想在下拉列表中添加自定义按钮，就像每个下拉列表中都有可搜索的文本框一样 我想这可能是可能的，但我不知道如何才能做到我尝试了所有的选择，无论我在互联网上，但我仍然卡住了 非常感谢您宝贵的选择/出路和评论 app.component.html代码如何在angular中的ng multiselect下拉列表中添加自定义按钮,angular,angular8,Angular,Angular8,我想在ng multiselect下拉列表中添加按钮，如关闭下拉列表的ok按钮，并在下拉列表中选择all和unSelect按钮 我使用的是Angular 8，使用的是ng multiselect下拉列表，下面是代码片段 这就是我现在的管理方式，但实际需求是我想在下拉列表中添加自定义按钮，就像每个下拉列表中都有可搜索的文本框一样 我想这可能是可能的，但我不知道如何才能做到我尝试了所有的选择，无论我在互联网上，但我仍然卡住了 非常感谢您宝贵的选择/出路和评论 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>
我敢肯定你运气不好。下面是ng multiselect下拉列表的实际实现 它由搜索栏、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>
我敢肯定你运气不好。下面是ng multiselect下拉列表的实际实现 它由搜索栏、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>