Angular: не удалось реализовать канал поиска - PullRequest
Новая
       6

Angular: не удалось реализовать канал поиска

0 голосов
/ 13 января 2020

Я следовал за следующим ответом { ссылка } и пытался реализовать код в своем собственном решении, но, похоже, это не удалось. В моей конфигурации есть список сгенерированных пользователей, а поверх этого поля есть панель поиска, используемая для поиска пользователей. Пожалуйста, смотрите код для получения дополнительной информации. Мой search.pipe.ts: 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(value: any, args?: any): any {

    if(!value)return null;
    if(!args)return value;

    args = args.toLowerCase();

    return value.filter(function(item){
        return JSON.stringify(item).toLowerCase().includes(args);
    });
}

}

users.component. html: 

...
<div class="col-lg-12">

    <p class="list-header">Element overview</p>

    <div class="form-group"><!--
      <label for="filter" class="lb-sm">Filter</label> -->
      <input type="text" class="form-control input-sm" name="filter" placeholder="Filter" id="filter" [(ngModel)]="query">
    </div>

   <select name="userSelect" size="20" multiple class="form-control" id="elementlist" [(ngModel)]="selectedItem" (change)="clickItem($event.target.value)">
    <option *ngFor="let user of users | search: query" value="{{user.firstname}}">
        {{user?.lastname}}, {{user?.firstname}}
      </option>
    </select>
  </div>
...

My users.component.ts: 

...
export class UsersComponent implements OnInit {

  public search:any = '';
...

I получить ошибку Identifier 'query' is not defined. The component declaration, template variable declarations, and element references do not contain such a member два раза - в ngModel и в канале ngFor. Кроме того, элементами для поиска являются фамилии и имена, поэтому они начинаются с заглавной буквы.

** ОБНОВЛЕНИЕ ** Мой JSON, полученный от моего BackEnd, следующий: 

[{"_id":"5df0f0dbb97cfc2f3c4b6381","firstname":"Chad","lastname":"Johnson","password":"$2b$10$Dk09I8Qtgb/x76kqD/8are/4l/ir4Rp1vVS9DFp5T6lIGw0ldLu/O","eMail":"chad@johnson.com","active":true,"__v":0},{"_id":"5df8ba0f99a34e2070aad054","firstname":"John","lastname":"Smith","password":"$2b$10$Szcw9PZfoYA.lIA843.wt.HE99vQhoWdnMdFmlWUXFgcsdZ8sEvri","eMail":"john@smith.com","active":true,"__v":0},{"_id":"5e15da927932c92e448c3574","firstname":"Maret","lastname":"Smith","password":"$2b$10$0cd7qTf0k9NNICfiVF1ddu/w0XftGU2EkYMXZlIuEj06hd8SU1qle","eMail":"maret@smith.com","active":true,"__v":0}]

Что я делаю не так?

...