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

Question

我在 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。

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)，这在一定程度上阻止了浏览器提交 get 请求的默认行为。

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

一个工作示例 - https://stackblitz.com/edit/angular-f8s8zf