Question

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

我希望将其尺寸设置为：如果选择了任何可用选项，则宽度至少应为组件具有的最大宽度，否则宽度应为包含主动控件的宽度选择的选项。

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

Answer 1

添加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>

Answer 2

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

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

现在在getWidth函数中，您可以返回要控制宽度的任何值。您可以遍历项目，并获得项目的最大长度，然后转换为像素。您可能需要试验一下字符串长度与像素的比率。您还可以听事件并根据当前选择的内容返回宽度。

使ng-select width适应所选项目/可用选项？

2 个答案: