极客教程Angular PrimeNG表格下拉方法组件
Angular PrimeNG是PrimeTek开发的一个开源的前端UI框架，用于开发高效和可扩展的angular应用程序。在他们的项目中使用PrimeNG可以帮助开发人员减少开发时间，并专注于应用程序的其他重要领域。在这篇文章中，我们将看到Angular PrimeNG表单下拉方法组件。
下拉组件用于为用户提供一个选项列表，用户可以从其中选择任何一个选项。它通常用于实现过滤器，询问用户的国家，等等。它被用来从给定的项目列表中选择对象。下拉方法用于重置过滤器、应用焦点、显示和隐藏表单下拉组件中的面板。
Angular PrimeNG表格下拉方法：
- resetFilter。该方法用于重置表单下拉组件的过滤功能。
- focus。该方法用于在表单下拉组件中应用焦点。
- show。该方法用于显示表单下拉组件中的面板。
- hide。该方法用于隐藏表单下拉组件中的面板。
Angular PrimeNG表格下拉方法属性。
- option。此属性接受一个对象数组，以显示为下拉选项。
- placeholder。此属性用于设置下拉字段的占位符。
- optionLabel。这个属性是一个选项的标签字段的名称。
语法:
// app.component.html
<p-dropdown
styleClass="dropdown1"
[options]="sports"
[(ngModel)]="chosenSport"
optionLabel="name">
<ng-template pTemplate="items">
...
</ng-template>
</p-dropdown>
// app.component.ts
public Method() {
//statement
this.dropdown.methodName();
}
创建Angular应用程序并安装模块：。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：最后，在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：完成上述步骤后，项目结构将如下所示。
Project Structure
- 要运行上述文件，请运行以下命令。
ng serve --open
示例1：在下面的代码示例中，我们将利用表单下拉组件的resetFilter方法。
- app.component.html
<div style="text-align:center;">
<div>
<h2 style="color: green">GeeksforGeeks</h2>
<h4>
Angular PrimeNG Form
Dropdown Methods Component
</h4>
<p-dropdown #dd [(ngModel)]="selectedCountry"
placeholder="Select Your Country"
optionLabel="name"
[showClear]="true"
[filter]="true"
[options]="countries">
</p-dropdown>
<p-button label="Reset"
(onClick)="ddresetFilter()">
</p-button>
</div>
</div>
- app.component.css
:host ::ng-deep .p-dropdown {
width: 250px;
margin-right: 20px;
}
:host ::ng-deep .p-dropdown-item {
font-weight: bold;
}
- app.component.ts
import { Component, ViewChild } from '@angular/core';
import { Dropdown } from 'primeng/dropdown';
interface Country {
name: string;
code: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
countries: Country[] = [];
selectedCountry?: Country;
@ViewChild('dd') dropdown!: Dropdown;
ngOnInit() {
this.countries = [
{
name: "India",
code: "+91"
},
{
name: "Nepal",
code: "+977"
},
{
name: "Bhutan",
code: "+975"
},
{
name: "Russia",
code: "+7"
},
{
name: "Bangladesh",
code: "+880"
},
{
name: "Canada",
code: "+1"
}
];
}
public ddresetFilter() {
this.dropdown.resetFilter();
}
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { DropdownModule } from 'primeng/dropdown';
import { ButtonModule } from 'primeng/button';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
DropdownModule,
FormsModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
输出:
例子2：在下面的代码例子中，我们将利用表单下拉组件的show和hide方法。
- app.component.html
<div style="text-align:center;">
<div>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h4>
Angular PrimeNG Form
Dropdown Methods Component
</h4>
<p-dropdown #dd [(ngModel)]="selectedCountry"
placeholder="Select Your Country"
optionLabel="name"
[showClear]="true"
[options]="countries">
</p-dropdown>
<p-button label="Show"
(onClick)="show()">
</p-button>
<p-button label="Hide"
(onClick)="hide()">
</p-button>
</div>
</div>
- app.component.css
:host ::ng-deep .p-dropdown {
width: 200px;
margin-right: 10px;
}
:host ::ng-deep .p-dropdown-item {
font-weight: bold;
}
:host ::ng-deep .p-button {
margin-right: 10px;
}
- app.component.ts
import { Component, ViewChild } from '@angular/core';
import { Dropdown } from 'primeng/dropdown';
interface Country {
name: string;
code: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
countries: Country[] = [];
selectedCountry?: Country;
@ViewChild('dd') dropdown!: Dropdown;
ngOnInit() {
this.countries = [
{
name: "India",
code: "+91"
},
{
name: "Nepal",
code: "+977"
},
{
name: "Bhutan",
code: "+975"
},
{
name: "Russia",
code: "+7"
},
{
name: "Bangladesh",
code: "+880"
},
{
name: "Canada",
code: "+1"
}
];
}
public hide() {
this.dropdown.hide();
}
public show() {
this.dropdown.show();
}
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { DropdownModule } from 'primeng/dropdown';
import { ButtonModule } from 'primeng/button';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
DropdownModule,
FormsModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
输出:
