angular - 我如何将搜索参数传递到 URL？

我在 asp.net core web api 中创建了一个方法，它返回一个包含我通过 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。所以无论我输入什么，它都会发送 undefined。

答案＃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)，这在某种程度上可以防止浏览器的默认行为，即提交 GET 请求。

2. 将名为 keyboard 的变量绑定到 input[name="keyword"]，然后在 ngSubmit 中传递其值。

一个可用的示例 - https://stackblitz.com/edit/angular-f8s8zf