ng-select 自动完成已知项目

Question

我正在编写一个有角度的应用程序，并希望能够通过键盘以“hh:mm”的形式输入时间。 我见过的所有组件都很花哨，但需要太多的用户交互。

为了加快输入速度，我使用 "@ng-select/ng-select": "^7.0.0"，显示动态时间，例如 "10:21"、"10:22"、"10:23" 等用户输入 10，冒号应自动添加到输入字段。 现在，用户可以继续仅使用数字键盘输入数字，并且能够在输入字段中选择时间。

这些项目是 [{tijd: "10:21"}, {tijd: "10:22"}, {tijd: "10:23"}]

我的实现

模板

                            <ng-select
                                       id="tijdInvoer"
                                       placeholder="hh:mm"
                                       bindLabel="tijd"
                                       bindValue="tijd"
                                       [items]="daglicht"
                                       [closeOnSelect]="true"
                                       [(ngModel)]="tijdInvoer"
                                       [searchFn]="startsWithSearchFn"
                                    >
                            </ng-select>

打字稿

export class TijdInvoerComponent  {
    daglicht: any = [];
    tijdInvoer: string;

 
    vulDaglichtArray(datum: string) {
        const zonOpkomst = getSunrise(52, 4, new Date(datum));
        const zonOndergang = getSunset(52, 4, new Date(datum));

        const zonOpMin = zonOpkomst.getHours() * 60 + zonOpkomst.getMinutes();
        const zonOnderMin = zonOndergang.getHours() * 60 + zonOndergang.getMinutes();

        this.daglicht = [];
        for (let min = zonOpMin; min < zonOnderMin + 60; min++) {
            let h = Math.floor(min / 60).toString();
            let m = (min % 60).toString();
            this.daglicht.push({
                tijd: h.padStart(2, '0') + ':' + m.padStart(2, '0'),
            })
        }
    }

    defaultInvoerTijd(invoerTijd?: string) {
        const nu: DateTime = DateTime.now();
        this.tijdInvoer = (invoerTijd) ? invoerTijd : nu.toISOTime().substring(0, 5);
    }

我研究了 ng-select 组件。 但我没有 typeahead 和 autoComplete 之间的区别。 我见过的例子，是非常困难的。 那么，有人可以给我一个解决方案的方向吗？