使ng-select宽度调整到所选项目/可用选项？

Question

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

我希望它的大小使得宽度至少是组件在选择任何一个可用选项时所具有的最大宽度，并且否则宽度是包含主动选择的选项所需的宽度。

是否有可能让ng-select以这种方式行事？

Answer 1

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

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

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