Question

我有一个angular2应用程序，想要添加一个搜索功能。

我添加了一个TextBox和一个按钮。按钮单击获取该文本框中的值并将其传递给后端（在快速框架中构建）。

我的代码如下。

<input type="text" name="search" class="form-control" formControlName="search/> 
<button type="submit" name="button"(click)="search()">Search</button>

然后是按钮点击事件，

search(){
  const activity = {
  search: this.form.get('search').value,
}
this.Service.getSearch(activity.search).subscribe(data => {
  this.activitylist = data.activities;

然后有一个服务类来访问后端。我是怎么做的，我正在使用params。从后端获取值。

现在我想做这个查询。

为我的网址提供其他网址格式。

当有人搜索时，URL应该像

'/allActivities?search='+search

这样的事情？

有人能告诉我怎么做吗？如何将这个从角度2前端传递给表达API？

Answer 1

使用Http Module从Backend获取数据

<强>例如 -

启用HTTP模块

<强> app.module.ts

import {HttpModule} from "@angular/http";

imports:[HttpModule]

在组件中

searchField: FormControl;
coolForm: FormGroup;

constructor(private service: Service){}

this.searchField.valueChanges
  .debounceTime(400)
  .distinctUntilChanged()
  .switchMap(term => this.service.getUser(term))
  .subscribe((result) => {
    console.log(result);
    this.result = result;
  });

<强>服务

 constructor(private http:Http) { }

getUser(user:string){
    return this.http.get('https://api.github.com/users/'+user) // using git as reference
    //you can also use your query params here
      .map(response => response.json());
  }

<强>模板

<form [formGroup]="coolForm">
  <md-input-container>
    <input mdInput type="text" placeholder="Search Github Repo" formControlName="search">
  </md-input-container>
</form>

你可以在Github的这个link serach中看到相同的工作示例

如何从角度2搜索数据库值？

1 个答案: