angular - Hur skickar jag en sökparameter till URL?

Jag skapade en metod i asp.net core web api som returnerar ett objekt som innehåller strängen jag skickar i URL:en.

Nu har jag ett sökformulär som borde skicka den strängen till URL:en och returnera de objekt som innehåller den.

Så här använder jag API:et:

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[]));
  }

Detta är sökformuläret:

<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>

Och hur jag skickar strängen:

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

Även formuläret och tabellen som returnerar resultatet är inte i samma komponent om det spelar någon roll.

Vad jag får nu när jag söker skickar det rootURL/search/undefined. Så vad jag än skriver skickar det undefined.

Svar #1

Det beror på att du har infogat fel parameter i form.(submit).

Ändra detta:

<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"
    />

Till detta:

<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
    />

Det jag gjorde var:

1. Att ändra (submit)-händelsen till (ngSubmit) vilket på ett sätt hindrar webbläsaren från det vanliga beteendet att skicka en GET-begäran.

2. binder en variabel som heter keyboard till input[name="keyword"] och sedan skickar dess värde i ngSubmit.

Ett fungerande exempel - https://stackblitz.com/edit/angular-f8s8zf