2

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

如果选择了任何一个可用选项，我希望它的宽度至少是组件将具有的最大宽度，否则宽度是包含主动选择的选项所需的任何宽度。

是否有可能让 ng-select 以这种方式表现？

4

2 回答 2

5

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

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

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

于 2019-03-02T16:52:36.680 回答
3

添加 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>
于 2020-02-20T13:08:51.900 回答