使用 angular primeng 根据搜索值显示来自 api 的用户数据

Question

我正在使用 angular primeng 开发 Angular 7 应用程序，并且是 Angular 的新手。场景是这样的。

a) 从外部获取用户数据 api 但我需要根据输入搜索显示用户。我尝试阅读以下文档 "Multiple" select https://www.primefaces.org/primeng/#/autocomplete 但无法显示基于搜索的值。

b) 我在搜索部分的右侧添加了添加按钮。单击添加按钮后，用户应显示在其下方。

请查看代码片段。 home.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>

country.service.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);
      }
    )
  }

如果有人能帮助我找到如何基于搜索显示用户数据并在单击“添加”按钮时显示它，那将非常有帮助。

Answer 1

根据文档 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);
      }
  }

使用 angular primeng 根据搜索值显示来自 api 的用户数据

Display user data from api based on search value using angular primeng

javascript

primeng

angular

angular7