Как передать параметр поиска в URL?

Question

Я создал метод в основном веб-интерфейсе asp.net, который возвращает мне объект, содержащий строку, которую я передаю в URL.

Теперь у меня есть поисковая форма, которая должна отправить эту строку в URL и вернуть мне объекты, которые ее содержат.

Вот как я использую API:

import { Injectable } from "@angular/core";
import { ContactDetail } from "./contact-detail.model";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class ContactDetailService {
  formData: ContactDetail;
  readonly rootURL = "http://localhost:60809/api";
  list: ContactDetail[];

  constructor(private http: HttpClient) {}

 // search contacts
  searchContactDetail(keyword: string) {
    return this.http
      .get(this.rootURL + "/ContactDetail/Search/" + keyword)
      .toPromise()
      .then(res => (this.list = res as ContactDetail[]));
  }

Это форма поиска:

<form
      class="form-inline"
      #form="ngForm"
      autocomplete="off"
      (submit)="searchContact(keyword)"
    >
      <input
        name="keyword"
        class="form-control mr-sm-2"
        type="search"
        placeholder="Search"
        aria-label="keyword"
      />
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
        Search
      </button>
    </form>

А как мне отправить строку:

 searchContact(keyword: string) {
    this.service.searchContactDetail(keyword);
  }

Кроме того, форма и таблица, которая возвращает результат, находятся не в одном компоненте, если это имеет значение.

То, что я получаю сейчас при поиске, отправляет rootURL / search / undefined. Поэтому все, что я печатаю, отправляет неопределенное.

Answer 1

Это потому, что вы вставили неправильный параметр в form.(submit).

Изменить это:

<form
  class="form-inline"
  #form="ngForm"
  autocomplete="off"
  (submit)="searchContact(keyword)"
>

  <input
    name="keyword"
    class="form-control mr-sm-2"
    type="search"
    placeholder="Search"
    aria-label="keyword"
    />

К этому:

<form
  class="form-inline"
  autocomplete="off"
  (ngSubmit)="searchContact(keyword.value)"
>

  <input
    name="keyword"
    class="form-control mr-sm-2"
    type="search"
    placeholder="Search"
    aria-label="keyword"
    #keyword
    />

То, что я сделал, было:

1. Изменение события (submit) на (ngSubmit), что не позволяет браузеру по умолчанию отправлять запрос на получение.

2. связывает переменную с именем keyboard с input[name="keyword"] и затем передает ее значение в ngSubmit.

Рабочий пример - https://stackblitz.com/edit/angular-f8s8zf

Answer 2

Html

<form
  class="form-inline"
  #form="ngForm"
  autocomplete="off"
  (submit)="searchContact(form.value)" <!–– pass form.value––>
>

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

searchContact(keyword) {
        console.log(keyword);
        this.service.searchContactDetail(keyword);
      }

потребляют API

    searchContactDetail(keyword: string) {
let url = `${this.rootURL}/ContactDetail/Search/`;
        return this.http
          .get(`${this.url}${keyword})
          .toPromise()
          .then(res => (this.list = res as ContactDetail[]));
      }