Отображение пользовательских данных из API на основе значения поиска с использованием углового primeng - PullRequest
Новая
       15

Отображение пользовательских данных из API на основе значения поиска с использованием углового primeng

1 голос
/ 01 мая 2019

Я работаю над приложением Angular 7, используя Angular Primeng и новичок в Angular. Это сценарий.

a) Извлеченные данные пользователя из внешнего API, но мне нужно, чтобы отобразить пользователя на основе поиска ввода. Я пытался прочитать следующую документацию «Несколько», выберите https://www.primefaces.org/primeng/#/autocomplete, но не смог отобразить значение на основе поиска.

б) Я добавил кнопку «Добавить» в правой части раздела поиска. После нажатия кнопки добавления пользователь должен отобразиться под ней.

Пожалуйста, посмотрите фрагмент кода. 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);
      }
    )
  }

Было бы очень полезно, если бы кто-нибудь помог мне найти способы отображения пользовательских данных на основе поиска и их отображения при нажатии кнопки «Добавить».

1 Ответ

1 голос
/ 02 мая 2019

Согласно документу https://www.primefaces.org/primeng/#/autocomplete используйте completeMethod для запроса результатов.Событие содержит текст запроса.Затем создайте функцию поиска и сравните как запрос, так и FilterUsersMultiple.

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