angular - Angular 5 ng-选择

Question

我正在使用来自https://github.com/ng-select/ng-select的 ng-select 组件 。但是，在某些情况下，下拉列表的内容太长。下拉列表中的字符串将被缩短...是否可以根据内容的长度使下拉列表大于输入宽度？可能使用 CSS 样式（自定义）。

<div layout="row">
    <label>Your first ng-select</label>
    <ng-select class="custom" [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity">
    </ng-select>

    <label>Your first ng-select</label>
    <ng-select class="custom" [items]="cities"
               bindLabel="name"
               placeholder="Select city"
               [(ngModel)]="selectedCity">
    </ng-select>
</div

Answer 1

在 CSS/SCSS（你使用的样式）集中

.ng-dropdown-panel {
    min-width: 100%;
}

不过看起来不是很好...

选择：

white-space: nowrap;从那里删除.ng-dropdown-panel .ng-dropdown-panel-items .ng-option它会分成多行。

Answer 2

1. 添加封装：ViewEncapsulation.None。
2. 给它一个类名。并使用它覆盖 CSS

.ng-select.custom .ng-value-container
    {
      height: 10px;
    }

这里 ng-select 是组件，custom 是类名。