我正在使用 Angular primeng 开发 Angular 7 应用程序,并且是 Angular 的新手。这是场景。
a) 从外部 api 获取用户数据,但我需要根据输入搜索显示用户。我试图阅读以下文档“多个”选择 https://www.primefaces.org/primeng/#/autocomplete但无法显示基于搜索的值。
b) 我在搜索部分的右侧添加了添加按钮。单击添加按钮后,用户应显示在其下方。
请查看代码片段。 主页.component.html
<div class="ui-g">
<div class="ui-g-9">
<p-autoComplete [(ngModel)]="patients" [suggestions]="filteredUsersMultiple" (completeMethod)="filterCountryMultiple($event)"
[minLength]="1" placeholder="Users" field="name" [multiple]="true">
</p-autoComplete>
<ul>
<li *ngFor="let c of patients">{{c}}</li>
</ul>
</div>
<div class="ui-g-3">
<button pButton type="button" label="Add" class="ui-button-secondary"></button>
</div>
</div>
国家.服务.ts
export class CountryService {
constructor(private http: HttpClient) { }
getUsers() {
return this.http.get('https://jsonplaceholder.typicode.com/users');
}
}
home.component.ts
filterCountryMultiple(event) {
this.userService.getUsers().subscribe(
(val: any[]) => {
this.filteredUsersMultiple = val.map(user => user.username);
console.log(this.filteredUsersMultiple);
}
)
}
如果有人可以帮助我找到如何基于搜索显示用户数据并在单击“添加”按钮时显示它,那将非常有帮助。
最佳答案
根据文档 https://www.primefaces.org/primeng/#/autocomplete使用 completeMethod 查询结果。该事件包含查询文本。然后创建一个搜索函数并比较查询和 filteredUsersMultiple。
filterCountryMultiple(event) {
let query = event.query;
this.userService.getUsers().subscribe(
(val: any[]) => {
this.filteredUsersMultiple = val.map(user => user.username);
this.checkUsers = this.mySearch(query, this.filteredUsersMultiple);
});
}
mySearch(query, filteredUsersMultiple: any[]):any[] {
let filtered : any[] = [];
for(let i = 0; i < filteredUsersMultiple.length; i++) {
let data = filteredUsersMultiple[i];
if(data.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(data);
}
}
关于javascript - 使用angular primeng根据搜索值显示来自api的用户数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55934999/