Блог

В моем проекте Angular я хочу искать клиентов по свойствам, например по имени. В своем сервисе я создал метод, который возвращает http-ответ, но, конечно, он работает только в том случае, если пользователь вводит полное правильное имя. Есть ли возможность получить URL-адреса, содержащие то, что предоставляет пользователь? А также как настроить этот метод для поиска по определенному свойству в зависимости от того, какое поле выбирает пользователь (имя, адрес и т.д.)?

клиент.сервис.ts

 import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
export class ClientService {

  constructor(private http: HttpClient) { }

const baseUrl = 'http://localhost:3000/clients';
  findByName(value: any): Observable<any> {
    return this.http.get(`${baseUrl}?name=${value}`);
  }
}
 

клиенты-список.компонент.ts

 import { Component, OnInit } from '@angular/core';
import { ClientService } from 'src/app/services/client.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-clients-list',
  templateUrl: './clients-list.component.html',
  styleUrls: ['./clients-list.component.css']
})
export class ClientsListComponent implements OnInit {
    clients: any;
    name = '';
constructor(private clientService: ClientService,
    private router: Router) {

    }
 ngOnInit(): void {
    this.retrieveClients();
  }

  retrieveClients(): void {
    this.clientService.getAll()
      .subscribe(
        data => {
          this.clients = data;
          console.log(data);

        },
        error => {
          console.log(error);
        });
  }
searchName(): void {
    this.clientService.findByName(this.name)
      .subscribe(
        data => {
          this.clients = data;
          console.log(data);
        },
        error => {
          console.log(error);
        });
  }
}
 

и мой html:

 <input type="text" name="name" placeholder="Search..." [(ngModel)]="name">
<button type="button" (click)="searchName()">Search</button>