如何限制NgSelect下拉面板中显示的项目数

Question

所以我使用Angular ngselect来显示一个包含一堆选项的下拉列表。由于屏幕的限制，我想将下拉列表中显示的项目数量限制为3，用户可以滚动浏览其余项目。

我在一个反应形式中使用ng-select和[！[看起来像这样][1]][1]

当我点击付款方式时，布局似乎很好，因为它只包含2个项目。[！[在此输入图像描述][2]][2]

但当点击另一个下拉列表时，它会被切断，因为下拉列表的大小不适合容器

[！[在此输入图像描述][3]][3]

我尝试的另一种方法是通过编写appendTo="body"将这个ng选择下拉列表附加到正文中

当下拉菜单弹出时，它看起来像这样[！[在此处输入图像描述][4]][4]

但这种方法的主要问题是，当我滚动浏览父项(在本例中是主体(时，下拉列表会被固定在它产生的同一位置，而理想的行为应该是它应该与ngselect元素一起移动。

[！[在此处输入图像描述][5]][5]

如何限制显示的元素数量，使其适合容器。[1] ：https://i.stack.imgur.com/HdfAb.png[2] ：https://i.stack.imgur.com/WRvk7.png[3] ：https://i.stack.imgur.com/P1W2w.png[4] ：https://i.stack.imgur.com/5augz.png[5] ：https://i.stack.imgur.com/8Nitf.png

Answer 1

看看这里github 问题

在这里底部一个示例

在这里带有复选框的版本

这里是一个只有4个项目可见的基本示例。如您所见，因此*ngFor指令中的slice:0:4。如果在具有〃的跨度中选择了4个以上的项目；更多">文本。

<ng-select
[items]="days"
[multiple]="true"
bindLabel="name"
bindValue="order"
placeholder="Select days"
[(ngModel)]="selectedDays">
<ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
<div class="ng-value" *ngFor="let item of items | slice:0:4">
<span class="ng-value-label">{{item.name}}</span>
<span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
</div>
<div class="ng-value" *ngIf="items.length > 4">
<span class="ng-value-label">{{items.length - 4}} more...</span>
</div>
</ng-template>
</ng-select>

然后在组件中

export class MultiSelectCustomExampleComponent implements OnInit {
daysOfWeek: DayOfWeek[] = [];
selectedDays: DayOfWeek[] = [];
constructor() {
}
ngOnInit() {
this.daysOfWeek = [
new DayOfWeek("Monday", 1),
new DayOfWeek("Tuesday", 2),
new DayOfWeek("Wednesday", 3),
new DayOfWeek("Thursday", 4),
new DayOfWeek("Friday", 5),
new DayOfWeek("Saturday", 6),
new DayOfWeek("Sunday", 7),
];
}
}

和一些模型的列表

export class DayOfWeek {
name: string;
order: number;

constructor(name: string, order: number) {
this.name = name;
this.order = order;
}
}