создать сервис для поиска элементов в списке

Question

у меня есть список данных, и я показываю его в таблице:

    <table style="width: 100%;border:2px solid black;">
  <tr>
    <th>Avatar</th>
    <th>Firstname</th>
    <th>Get Detail in Model</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>  <input [(ngModel)]="idSearch" placeholder="Id" /></td>
    <td>  <input [(ngModel)]="nameSearch" placeholder="Name" /></td>
  </tr>
  <tr *ngFor="let item of usersList ">
    <td><img [src]="item.picture" /></td>
    <td>{{ item.name }}</td>
    <td><a (click)="GetDetail(item._id)">Detail</a></td>
    <td><a (click)="Delete(item)">Delete</a></td>
  </tr>
</table>

, и это моя служба для получения предметов:

  GetUsers(): Observable<any> {
return this.httpClient.get<any>('../resources/users.json').pipe(
  map(res => {
    if (res) {
      return res;
    }
    return null;
  })
)

}

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

это Демонстрация моей проблемы

как решить эту проблему ????

Answer 1

Вы можете передать извлеченный JSON компонент фильтрации в качестве входных данных, а также внедрить службу туда, если входные данные не получены, вы можете вызвать службу непосредственно там.

После фильтрации данных, передать отфильтрованные данные в компонент приложения.

Filter Comp. html

<button (click)="search()">Search</button>

Filter comp.ts

export class SearchByFilterComponent implements OnInit {

@Input() userList: any[];
@Output() filteredList = new EventEmitter();

searchName:string = '';
  constructor(private userService: UserManagerService) { }

  ngOnInit() {
  }

  search() {
    if (this.userList) {
      this.filter();
    } else {
      this.userService.GetUsers().subscribe(data => {
        this.userList = data;
        this.filter();
    })
    }
  }

  filter() {
    if (this.userList) {
      const filteredData = this.userList.filter(ob => {
        return ob.name.toLowerCase().includes(this.searchName.toLowerCase());
      });
      this.filteredList.emit(filteredData)
    }
  }

}

App. html

<app-search-by-filter (filteredList)="updateList($event)" [userList]="usersListToSend"></app-search-by-filter>

App.comp.ts

usersListToSend: any[];
FetchData(): void {
  this.userService.GetUsers().subscribe(data => {
    console.log(data);
    this.usersList = data;
    this.usersListToSend = data;
  })
}

updateList(e) {
  this.usersList = e;
}

Выше представлены предлагаемые новые изменения, остальная часть вашего кода остается прежней.

Эта фильтрация в идеале должна выполняться в API уровень, но поскольку у нас есть JSON, мы каждый раз запрашиваем его.