dynamisch gebildet http Anfrage

Question

Ich brauche Erhaltungs-Anforderung wie diese zu meinem api senden:

http://test.example.com/api/activity/search?word={word}&age={age}&free={free} 

und dann zeigen diese Aktivitäten in meiner Seite mit * ngFor, aber wenn Benutzereingaben füllen, ich brauche Werte dynamisch einzufügen in unnötigen Argumenten davon. Was ich bereits getan:

//activity.service.ts : 
    searchActivities(word?: any, age?: any, free?: any) { 
    let w, a, f; 
//contat values from forms here 
    w = word  ? `word=${word}` : ''; 
    a = age  ? `age=${age}` : ''; 
    f = free  ? `free=${free}` : ''; 

    return this.http.get(`http://test.example.com/api/activity/search?${w}${a}${f}`); 
} 

wie Sie vielleicht bemerkt, ich verfehle kaufmännisches Und hier, und es funktioniert nur mit einem Eingang, zum Beispiel, wenn der Benutzer möchte alle freien Fußball-Aktivitäten sehen, er kann es nicht.

In meiner Komponente ich habe dies:

activities = []; 
args: any[] = [null, null, null]; //array for values 
//funtction attached to input's events 
setArgument(index, value) { 
     this.args[index] = value; //fills array with values from inputs 
     this.activityService 
    // spread operator gives error in typescript for some reason, so i decided to put arguments this way 
     .searchActivities(this.args[0], this.args[1], this.args[2]) 
     .subscribe((data: Response) => this.activities = data.json()); 
    } 

Beispiel der Eingänge:

<md-checkbox (click)="setArgument(5, !IsFree)" [(ngModel)]="IsFree" name="free">Free</md-checkbox> 
<md-input-container> 
    <input (focusout)="setArgument(0, word)" [(ngModel)]="word" name="word" mdInput placeholder="Search word"> 
</md-input-container> 

Ich hoffe, Sie verstehen, was ich tun werde versuchen, ich bin Anfänger in der Programmierung und vielleicht i mach es total schlecht. Bitte Rat, wie kann ich mit Et-Zeichen umgehen, und vielleicht vereinfachen oder diesen Code neu schreiben irgendwie

Answer 1

Eine gute Lösung für Ihr Ampersand Problem Array.prototype.join

So würden Sie Code ähnlich dem folgenden hinzufügen könnte:

w = word  ? `word=${word}` : ''; 
a = age  ? `age=${age}` : ''; 
f = free  ? `free=${free}` : ''; 

q = [w, a, f].filter(function(x) { return x !== '' }).join('&'); 

return this.http.get(`http://test.example.com/api/activity/search?${q}`); 

So erstellen Sie ein Array, das alle Ihre Abfragezeichenfolgen enthält, filter aus denen, die leer sind, und die Join zusammen in einer Zeichenfolge getrennt durch kaufmännische Und-Zeichen.