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

Question

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

我在响应式(Reactive)表单中使用 ng-select 并且 [![看起来像这样][1]][1]

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

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

[![在此处输入图片描述][3]][3]

我尝试的另一种方法是通过编写 appendTo="body"

将这个 ng select 下拉列表附加到 body

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

但这种方法的主要问题是，当我滚动浏览父级(在本例中为正文)时，下拉菜单会停留在它起源的同一位置，而理想的行为应该是它应该随着ngselect 元素。

[![在此处输入图片描述][5]][5]

如何限制显示的元素数量以使其适合容器。 [1]: /image/HdfAb.png [2]: /image/WRvk7.png [3]:/image/P1W2w.png [4]:/image/5augz.png [5]:/image/8Nitf.png

Answer 1

看这里 issue on github

在这里 bottom one example

还有这里 version with checkbox

这是一个只有 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;
    }
}