自定义 ng-multiselect 下拉值的显示值答案

【问题标题】：Customize display value of ng-multiselect dropdown value自定义 ng-multiselect 下拉值的显示值
【发布时间】：2019-09-24 06:03:35
【问题描述】：

我有一个 ng-multiselect 下拉菜单。当我选择所有值而不是显示下拉列表中的所有值时，它应该只在下拉列表中显示“全部”。

<ng-multiselect-dropdown
            [placeholder]="dropdowns.label"
            [data]="dropdowns.optionsList"
            [(ngModel)]="dropdowns.value"
            [settings]="dropdownSettings"
            (onSelect)="onItemSelect($event)"
            (onSelectAll)="onSelectAll($event)"
          >

this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 3,
      allowSearchFilter: false
    };

When selected all the dropdowns it should display 'All' in the dropdown

【问题讨论】：

标签： multi-select angular8

【解决方案1】：

您可以尝试在选择所有选项时将 dropdowns.value 的值更改为“ALL”。你可以在这个活动中做到这一点(onSelectAll)。

在 .ts 文件中：

onSelectAll(event){dropdowns.value="ALL"}

【讨论】：

我对 ng-multiselectdropdown.js 模板和样式做了一些更改，但是当我在生产模式下构建时，我不会得到更改。

【解决方案2】：

您似乎在node_module 中进行了一些更改，但您无法在构建中获得更改。这在角度很常见。 Angular 不会在生产构建中获得您的自定义更改。

如果您的自定义更改工作正常，请使用此命令进行构建。在此命令的帮助下，您将获得构建中的更改。

ng build --aot=false

【讨论】：

【解决方案3】：

我已经尝试了很多实现相同但找不到任何解决方案，因为它已经构建了库。

我已经找到了替代方案。将 itemShowLimit 设置为 0，这意味着将不会显示任何项目。在这种情况下，在多选下拉列表旁边添加一个跨度并相应地调整位置。为我工作:)

示例代码：在 .ts 文件中：

this.dropdownSettings = {
  singleSelection: false,
  idField: 'item_id',
  textField: 'item_text',
  selectAllText: 'All',
  unSelectAllText: 'UnSelect All',
  itemsShowLimit: 0,
  allowSearchFilter: false
};

在 HTML 文件中：

<ng-multiselect-dropdown
        [placeholder]="dropdowns.label"
        [data]="dropdowns.optionsList"
        [(ngModel)]="dropdowns.value"
        [settings]="dropdownSettings"
        (onSelect)="onItemSelect($event)"
        (onSelectAll)="onSelectAll($event)"
      ><span>All</span>

我已自定义显示，因为我想显示所选项目的数量：https://i.stack.imgur.com/BsmRN.png

【讨论】：