Question

我需要将这样的get请求发送到我的api：

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

然后使用* ngFor在我的页面中显示此活动，但是当用户填充输入时，我需要在不必要的参数中动态插入值。我已经做了什么：

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

正如你所注意到的，我想念这里的＆符号，它只能用一个输入，例如当用户想看所有的免费足球活动时，他就不能。

在我的组件中我有这个：

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

输入示例：

<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>

我希望你能理解我想要做的事情，我是编程的新手，也许我完全做坏事。请建议我如何处理＆符号，并可能以某种方式简化或重写此代码

Answer 1

您的＆符问题的一个很好的解决方案是Array.prototype.join

因此，您可以添加类似于以下内容的代码：

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

因此，您创建一个包含所有查询字符串的数组，filter表示空的，并将它们连接成一个用＆符号分隔的字符串。

动态形成的http请求

1 个答案: