极客教程Angular PrimeNG 表单AutoComplete模板组件
Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将看到Angular PrimeNG中的Form AutoComplete Templating Component。
表单AutoComplete（Form AutoComplete）是一个输入字段，当用户在输入字段中输入数据时，它可以提供实时建议。Templating组件允许在建议面板内显示自定义内容。
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
语法:
<ng-template>...</ng-template>
项目结构：它将看起来像如下。
示例1：该代码示例描述了Angular PrimeNG中Form AutoComplete Templating组件的基本用法。
- app.component.html
<div style="text-align:center;">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h4>
Angular PrimeNG Form
AutoComplete Templating Component
</h4>
<h5>Dropdown and Templating</h5>
<p-autoComplete [(ngModel)]="selectedCountryAdvanced"
[suggestions]="filteredCountries"
(completeMethod)="filterCountry($event)"
field="name"
[dropdown]="true">
<ng-template let-country pTemplate="item">
<div class="country-item">
<div>{{ country.name }}</div>
</div>
</ng-template>
</p-autoComplete>
</div>
- app.component.ts
import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
import { SelectItem } from "primeng/api";
import { SelectItemGroup } from "primeng/api";
import { FilterService } from "primeng/api";
import { CountryService } from "./countryservice";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
providers: [CountryService, FilterService]
})
export class AppComponent {
selectedCountry: any;
countries: any[];
filteredCountries: any[];
selectedCountries: any[];
selectedCountryAdvanced: any[];
filteredBrands: any[];
groupedCities: SelectItemGroup[];
filteredGroups: any[];
constructor(
private countryService: CountryService,
private filterService: FilterService
) { }
ngOnInit() {
this.countryService.getCountries().then(countries => {
this.countries = countries;
});
}
filterCountry(event) {
let filtered: any[] = [];
let query = event.query;
for (let i = 0; i < this.countries.length; i++) {
let country = this.countries[i];
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
this.filteredCountries = filtered;
}
}
- 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 { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
AutoCompleteModule,
FormsModule,
HttpClientModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
- countryservice.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable()
export class CountryService {
constructor(private http: HttpClient) { }
getCountries() {
return this.http.get < any > ('assets/countries.json')
.toPromise()
.then(res => <any[] > res.data)
.then(data => { return data; });
}
}
- countries.json
{
"data": [
{ "name": "Mumbai" },
{ "name": "Dadar" },
{ "name": "Vasai" },
{ "name": "Naigaon" },
{ "name": "Virar" },
{ "name": "Andheri" },
{ "name": "Nallasopara" },
{ "name": "Malad" },
{ "name": "Dahisar" }
]
}
输出:
示例2：该代码示例描述了Angular PrimeNG中表单AutoComplete模板组件的基本用法，即禁用下拉输入域。
- app.component.html
<div style="text-align:center;">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h4>
Angular PrimeNG Form AutoComplete
Templating Component
</h4>
<h5>Dropdown and Templating</h5>
<p-autoComplete [(ngModel)]="selectedCountryAdvanced"
[suggestions]="filteredCountries"
(completeMethod)="filterCountry($event)"
field="name"
[dropdown]="true"
disabled="true">
<ng-template let-country pTemplate="item">
<div class="country-item">
<div>{{ country.name }}</div>
</div>
</ng-template>
</p-autoComplete>
</div>
- app.component.ts
import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
import { SelectItem } from "primeng/api";
import { SelectItemGroup } from "primeng/api";
import { FilterService } from "primeng/api";
import { CountryService } from "./countryservice";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
providers: [CountryService, FilterService]
})
export class AppComponent {
selectedCountry: any;
countries: any[];
filteredCountries: any[];
selectedCountries: any[];
selectedCountryAdvanced: any[];
filteredBrands: any[];
groupedCities: SelectItemGroup[];
filteredGroups: any[];
constructor(
private countryService: CountryService,
private filterService: FilterService
) { }
ngOnInit() {
this.countryService.getCountries().then(countries => {
this.countries = countries;
});
}
filterCountry(event) {
let filtered: any[] = [];
let query = event.query;
for (let i = 0; i < this.countries.length; i++) {
let country = this.countries[i];
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
this.filteredCountries = filtered;
}
}
- 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 { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AutoCompleteModule } from 'primeng/autocomplete';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
AutoCompleteModule,
FormsModule,
HttpClientModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
- countryservice.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable()
export class CountryService {
constructor(private http: HttpClient) { }
getCountries() {
return this.http.get<any>('assets/countries.json')
.toPromise()
.then(res => <any[]>res.data)
.then(data => { return data; });
}
}
输出:
