css - 使 ng-select 宽度调整为所选元素/可用选项？

Question

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

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

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

Answer 1

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

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

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