PrimeNG 自动完成下拉设置 Angular
PrimeNG auto-complete dropdown setup with Angular
自动完成不工作,第一次加载下拉列表,一旦我尝试输入一些没有过滤的东西,然后 dropwdown 值就消失了
service.ts
getUserLocations(UserID: string, allList:string ) {
return this._http.get(environment.BASE_API_URL + 'xxxxx/' + ID + '/' + allList)
.map((response: Response) => response.json())
.do(data => console.log('locations ' + JSON.stringify(data)))
.catch(this.handleError);
}
compnent.ts
brand: any [];
filteredBrands: any[];
GetUserLocations(PNSLUID: string, allList: string) {
this._searchService.getUserLocations(ID, allList)
.subscribe(
data => {
this.brand= data.result.name;//not sure how to bind the id
},
error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
}
filterBrands(event) {
this.filteredBrands = [];
for (let i = 0; i < this.brand.length; i++) {
let brand = this.brand[i];
if (brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
this.filteredBrands.push(brand);
}
}
}
html
<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
[minLength]="1" placeholder="Office" [dropdown]="true">
<ng-template let-brand pTemplate="item">
<div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
<div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
</div>
</ng-template>
</p-autoComplete>
问题是它没有填充自动完成下拉列表..绑定有问题
************************************************ ****更新********************************************* *********
问题:示例:我的下拉列表具有以下值
区域a
b区
区域c
乙肝办公室
迪办公室
如果我键入区域自动完成不起作用它仍然显示所有值,但是,如果我 select 区域 b 然后开始删除 b 然后自动完成工作..换句话说..它只工作如果我 select 一个值,但如果我从空文本开始并开始输入它不起作用
html
<p-autoComplete name="OfficeList" [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
界面
export interface IOffices {
id: number,
name:string
}
组件
val: IOffices;
results: IOffices[];
originalResults: IOffices[];
GetUserLocations(PNSLUID: string, allList: string) {
this._searchService.getUserLocations(PNSLUID, allList)
.subscribe(
data => {
this.results = data.result;
this.originalResults = data.result;
},
error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
})
}
search(event) {
console.log("result 2 : " + this.originalResults.length.toString());
console.log("event : " + event.query.toString());
this.results = this.originalResults;
this.results = this.results.filter(data =>
data.name.indexOf(event.query) !== -1);
}
似乎您使用的是 primeng 网站上发布的代码。请查看他们的 docs
中的 Objects 部分
这段代码适用于字符串,如果我理解你的代码,你正在尝试绑定一个对象。
所以我的建议是:
如果您要绑定对象,您应该使用 autocomplete
中的属性 field
来设置要向用户显示的对象 属性。
您放入 NgModel
的变量(您可以使用整个对象)应该 "the same type" 建议数组中的对象。
对于单击时的下拉功能,使用 onDropdownClick
事件
HTML
<p-autoComplete name="OfficeList" [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)"
[size]="30" [minLength]="1" placeholder="Office" [dropdown]="true" (onDropdownClick)="GetUserLocations()">
</p-autoComplete>
Component.ts
brand: any [];
filteredBrands: any[];
GetUserLocations(PNSLUID: string, allList: string) {
this._searchService.getUserLocations(ID, allList)
.subscribe(
data => {
this.results = data.result; // You should put the entire array of objects here
},
error => console.log('error'));
}
search(event) {
this.results = this.results
.filter(data => data..toString()
.toLowerCase()
.indexOf(event.query.toString().toLowerCase()) !== -1);
}
进行此调整应该有效。
一个工作示例:
https://primeng-autocomplete-example.stackblitz.io/
希望对您有所帮助。
自动完成不工作,第一次加载下拉列表,一旦我尝试输入一些没有过滤的东西,然后 dropwdown 值就消失了 service.ts
getUserLocations(UserID: string, allList:string ) {
return this._http.get(environment.BASE_API_URL + 'xxxxx/' + ID + '/' + allList)
.map((response: Response) => response.json())
.do(data => console.log('locations ' + JSON.stringify(data)))
.catch(this.handleError);
}
compnent.ts
brand: any [];
filteredBrands: any[];
GetUserLocations(PNSLUID: string, allList: string) {
this._searchService.getUserLocations(ID, allList)
.subscribe(
data => {
this.brand= data.result.name;//not sure how to bind the id
},
error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
}
filterBrands(event) {
this.filteredBrands = [];
for (let i = 0; i < this.brand.length; i++) {
let brand = this.brand[i];
if (brand.toLowerCase().indexOf(event.query.toLowerCase()) == 0) {
this.filteredBrands.push(brand);
}
}
}
html
<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
[minLength]="1" placeholder="Office" [dropdown]="true">
<ng-template let-brand pTemplate="item">
<div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
<div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
</div>
</ng-template>
</p-autoComplete>
问题是它没有填充自动完成下拉列表..绑定有问题
************************************************ ****更新********************************************* ********* 问题:示例:我的下拉列表具有以下值
区域a
b区
区域c
乙肝办公室
迪办公室
如果我键入区域自动完成不起作用它仍然显示所有值,但是,如果我 select 区域 b 然后开始删除 b 然后自动完成工作..换句话说..它只工作如果我 select 一个值,但如果我从空文本开始并开始输入它不起作用
html
<p-autoComplete name="OfficeList" [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
界面
export interface IOffices {
id: number,
name:string
}
组件
val: IOffices;
results: IOffices[];
originalResults: IOffices[];
GetUserLocations(PNSLUID: string, allList: string) {
this._searchService.getUserLocations(PNSLUID, allList)
.subscribe(
data => {
this.results = data.result;
this.originalResults = data.result;
},
error => console.log('GetControls Method: ' + <any>error, 'alert alert-danger'));
})
}
search(event) {
console.log("result 2 : " + this.originalResults.length.toString());
console.log("event : " + event.query.toString());
this.results = this.originalResults;
this.results = this.results.filter(data =>
data.name.indexOf(event.query) !== -1);
}
似乎您使用的是 primeng 网站上发布的代码。请查看他们的 docs
中的 Objects 部分这段代码适用于字符串,如果我理解你的代码,你正在尝试绑定一个对象。
所以我的建议是:
如果您要绑定对象,您应该使用
autocomplete
中的属性field
来设置要向用户显示的对象 属性。您放入
NgModel
的变量(您可以使用整个对象)应该 "the same type" 建议数组中的对象。对于单击时的下拉功能,使用
onDropdownClick
事件
HTML
<p-autoComplete name="OfficeList" [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)"
[size]="30" [minLength]="1" placeholder="Office" [dropdown]="true" (onDropdownClick)="GetUserLocations()">
</p-autoComplete>
Component.ts
brand: any [];
filteredBrands: any[];
GetUserLocations(PNSLUID: string, allList: string) {
this._searchService.getUserLocations(ID, allList)
.subscribe(
data => {
this.results = data.result; // You should put the entire array of objects here
},
error => console.log('error'));
}
search(event) {
this.results = this.results
.filter(data => data..toString()
.toLowerCase()
.indexOf(event.query.toString().toLowerCase()) !== -1);
}
进行此调整应该有效。
一个工作示例: https://primeng-autocomplete-example.stackblitz.io/
希望对您有所帮助。