要在Angular 8的PrimeNG下拉菜单中设置初始值,你可以使用响应式表单的方式,并在组件中初始化表单控件的值。下面是一个示例代码:
首先,确保你已经安装了PrimeNG和Angular的相关依赖:
npm install primeng --save
npm install primeicons --save
在组件的HTML模板中,添加一个下拉菜单的HTML代码:
在组件的Typescript文件中,导入相关的模块,并初始化表单控件的值:
import { Component, OnInit } from '@angular/core';
importimport { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
form: FormGroup;
cities: any[] = [
{label: 'New York', value: 'New York'},
{label: 'London', value: 'London'},
{label: 'Paris', value: 'Paris'}
];
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.form = this.fb.group({
selectedCity: ['London'] // 设置初始值为London
});
}
}
在上面的代码中,我们使用FormBuilder
来创建一个响应式表单,并且在selectedCity
表单控件上设置初始值为London
。你可以根据需要修改初始值。
请确保在模块文件中导入和使用了ReactiveFormsModule
模块:
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { YourComponentComponent } from './your-component/your-component.component';
@NgModule({
declarations: [
YourComponentComponent
],
imports: [
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [YourComponentComponent]
})
export class AppModule { }
这样,当你在页面中加载这个组件时,下拉菜单的初始值就会被设置为London
。你可以根据需要修改初始值和下拉菜单的选项。