带有可搜索下拉菜单的角度输入框答案

【问题标题】：angular input box with searchable dropdown带有可搜索下拉菜单的角度输入框
【发布时间】：2023-03-09 19:06:01
【问题描述】：

我正在尝试添加输入框，下面是我的代码。输入未显示

component.html

   <form [formGroup]="formGroup" (validSubmit)="onSubmit()">
     <div class="form-group mb-3">
       <label class="form-label">Age</label>
         <ng-select [items]="ages"
          [selectOnTab]="true"
           bindValue="value"
           labelForId="age"
           placeholder="Select age"
           formControlName="Age">
           </ng-select>
     </div>      
   </form>

组件.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators} from "@angular/forms";
 
@Component({
    selector: 'demo-form-validation',
    templateUrl: './basic-validation.html'
})
export class DemoFormBasicValidationComponent implements OnInit {
    formGroup: FormGroup;
 
    ages: any[] = [
        { value: '<18', label: 'Under 18' },
        { value: '18', label: '18' },
        { value: '>18', label: 'More than 18' },
    ];
 
    constructor(private formBuilder: FormBuilder) {}
 
    ngOnInit() {
        this.formGroup = this.formBuilder.group({
            Age: [null, Validators.required],
        });
    }
}

app.module.ts

import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
import { NgSelectModule } from '@ng-select/ng-select'
import { FormsModule } from '@angular/forms';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        NgBootstrapFormValidationModule.forRoot(),
        NgSelectModule,
        FormsModule
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

下面是我期待的图片

这是我得到的输出。仅显示标签

【问题讨论】：

使用 NgSelectModule 你看不到输入，但是当你点击选择时你可以开始写。试试
@Guiditox 除了标签之外什么都没有。无法输入任何内容
看这个链接一步一步做：npmjs.com/package/@ng-select/ng-select

标签： html angular typescript input dropdown

【解决方案1】：

前段时间我也遇到过类似的问题。

这是我尝试过的，它应该可以解决下拉列表显示的问题：

在您的 styles.css 文件中添加以下导入：

@import "~@ng-select/ng-select/themes/default.theme.css";

在应用程序刷新时，下拉菜单将按预期呈现。

在下面的链接中还提到了ng-select 组件的主题：

https://github.com/ng-select/ng-select#getting-started

【讨论】：