Блог

Главная - Вопросы по программированию - Как выполнить поиск по имени и фамилии с помощью get api в angular?

Как выполнить поиск по имени и фамилии с помощью get api в angular?

#html #angular #typescript #forms #crud

#HTML #angular #typescript #формы #crud

Вопрос:

Я хочу выполнить поиск по имени и фамилии с помощью get api. Я уже реализовал это, и это работает, но это также работает, когда хотя бы одно из входных значений правильное, а не все. Я хочу, чтобы строка таблицы отображалась только в том случае, если введены правильные имя и фамилия. Как мне это сделать?

 export class SearchDeleteComponent implements OnInit {

  users:any;

constructor(private service: NewUserService, private route:ActivatedRoute, private router:Router) { }

  ngOnInit() {
    let resp=this.service.getUsers();
    resp.subscribe((data)=>this.users=data);
  }
public findUserByName(){
   

   let resp=this.service.getUserByFirstName(this.firstName);
    resp.subscribe((data)=>this.users=data);

    let lName=this.service.getUserByLastName(this.lastName);
    lName.subscribe((data)=>this.users=data);
 
 
 <form>
             
        
               <div id="custom-search-input">
                <div class="input-group col-md-12" style="text-align: center">
                                        
                    <input class="search-query" type="text"  placeholder="Search With first name" size="50"  name="name"  [(ngModel)]="firstName"/>
    
                </div>
             
                                <br>
                                <div class="input-group col-md-12" style="text-align: center">
                                    
                                    <input class="search-query" type="text"  placeholder="Search With last name" size="50"  name="name"  [(ngModel)]="lastName"/>
                    
                                </div>
</div>
</div>
</forms>

Комментарии:

1. Если этот API принадлежит вам, вам, вероятно, следует написать метод, который будет выполнять поиск по всем этим параметрам одновременно. Получение значений обоих входных данных

2. не могли бы вы привести мне пример

3. Я не могу вам помочь, не зная вашего внутреннего кода.

Ответ №1:

Мое личное мнение таково, что вы добавляете другую конечную точку, которая принимает оба параметра и возвращает ваш ожидаемый результат. Это должно быть предпочтительным решением.

Если вы действительно хотите придерживаться своего единственного запроса, я предлагаю использовать forkJoin вместе с пересечением lodashs

 const response = forkJoin([
  this.service.getUserByFirstName(this.firstName),
  this.service.getUserByLastName(this.lastName)
]);

response.subscribe(
  ([firstNameUsers, lastNameUsers]) => this.users = lodash.intersectionWith(firstNameUsers, lastNameUsers, lodash.isEqual)
);

Или вы выполняете только один запрос и фильтруете ответ по второму параметру

 const response = this.service.getUserByFirstName(this.firstName).pipe(
  map(users => users.filter(user => user.lastName === this.lastName)),
);
response.subscribe(data => this.users = data);
Метки: