下面是一个使用Angular 5和Primeng的动态添加和删除选项的示例代码:
ng new dropdown-example
npm install primeng --save
npm install primeicons --save
在app.module.ts中添加以下代码:
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
DropdownModule,
FormsModule
],
...
})
export class AppModule { }
ng generate component dropdown
Add/Remove Dropdown Options
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {
options: any[];
selectedOption: string;
ngOnInit() {
this.options = ['Option 1', 'Option 2', 'Option 3'];
}
addOption() {
const newOption = 'Option ' + (this.options.length + 1);
this.options.push(newOption);
}
removeOption() {
this.options.pop();
}
}
ng serve
现在你应该能够在下拉菜单中动态添加和删除选项了。