使 ng-select 宽度调整为 selected 项目/可用选项？

Question

我在 Ionic3 / Angular5 项目中使用 ng-select 并且我正在使用它的多个 selection 配置。 select 输入的显示总是比包含 selected 项或任何可用选项所需的宽得多。

我希望调整它的大小，使宽度至少是组件在 selected 任何一个可用选项时将具有的最大宽度，否则宽度是包含主动 selected 选项所需的任何内容。

是否可以让 ng-select 以这种方式运行？

Answer 1

我不确定 ng-select 是否有任何内置方法来执行您想要的操作。但它是一个块元素，这意味着您可以根据需要控制其宽度。在 Angular 中，您可以使用 ngStyle 动态控制样式。例如：使用 ngStyle.

定义一个 getWidth() 函数

  <ng-select [items]="items"
           [ngStyle]= "{width:getWidth()}"
           >
  </ng-select>

现在在getWidth函数中，您可以return任何您想要控制宽度的值。您可以遍历项目，并获得项目的最大长度，然后转换为像素。您可能需要试验字符串长度与像素的比率。您还可以监听事件和 return 基于当前 selected 的宽度。

Answer 2

添加 ng-select { .ng-dropdown-panel { width: auto !important;在 CSS 中，它可以工作，但我建议在悬停时添加工具提示而不是添加 css。

<ng-template ng-option-tmp let-item="item">
        <div [ngbTooltip]="item.length > 15 ? item : ''" container="body">
          {{item.length > 15 ? (item| slice:0:15) + '..' : item}}
        </div>
</ng-template>

使 ng-select 宽度调整为 selected 项目/可用选项？

make ng-select width adjust to selected items / available options?

css

width

ionic-framework

angular-ngselect

angular