Comment rechercher une valeur de base de données angulaire 2?

Question

J'ai une application angular2 et je veux ajouter une fonction de recherche.

J'ai ajouté un TextBox et un bouton. Le bouton click obtient la valeur de cette zone de texte et la transmet au backend (structure express intégrée).

Mon code comme ci-dessous.

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

Ensuite, l'événement click bouton,

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

Ensuite, il y a une classe de service pour accéder au back-end. Comment je fais cela, j'utilise params. pour obtenir la valeur du backend.

Maintenant, je veux faire cette requête.

Donnez à mon URL un format d'URL de repos.

Lorsque la recherche de quelqu'un, URL doit être comme

'/allActivities?search='+search 

quelque chose comme ça?

Quelqu'un peut-il me dire comment faire? Comment passer de l'avant 2 angulaire à l'API express?

Answer 1

Utilisez Http module pour obtenir des données de Backend

EG-

Activer module HTTP

app.module.ts

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

imports:[HttpModule] 

dans le composant

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

service

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()); 
    } 

Modèle

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

vous pouvez voir l'exemple de travail de même dans ce link serach pour Github