Angular 角度http服务清除请求选项搜索参数

如果没有定义值，我不需要在URL中传递任何查询参数。在AngularJS中，当某些类型的参数被传递到

$resource

服务中，并且其值为空或未定义时，则从未将其追加到URL字符串中，但是在AngularJS中，Http服务及其用于设置头和参数的RequestOptions对象的行为不同

例如，此输入元素：

<select class="form-control form-control-sm" formControlName="catalogCode" title="Catalog Code">
    <option value="">- Catalog Code -</option>
    <option *ngFor="let option of codes" [value]="option.code">
      {{ option.text }}
    </option>
  </select>

如果填充了

参数.catalogCode

，则查询运行正常，URL看起来正确：

http://localhost:4200/offerings?catalogCode=CODE1

，但是，当我从列表中选择empty选项时，URL将是带有空值的

？catalogCode=

---

不幸的是，我的后端不喜欢空的

catalogCode

，所以我真的很想防止这种情况发生，因为它在旧版本中使用过。有没有合适的方法来清除它？

我认为除了手动过滤这些值之外，没有其他方法

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，VERSION}
从“@angular/platform browser”导入{BrowserModule}
从'@angular/forms'导入{FormsModule，ReactiveFormsModule，FormBuilder}；
从'@angular/Http'导入{HttpModule，Http，URLSearchParams}；
@组成部分({
选择器：“我的应用程序”，
模板：`
-目录代码-
{{option.text}
提交
`,
})
导出类应用程序{
公共myFormGroup；
公共代码=[
{代码：'option1'，文本：'option1'}，
{代码：'option2'，文本：'option2'}，
{代码：'option3'，文本：'option3'}，
];
构造函数（私有formBuilder:formBuilder，私有http:http）{
this.myFormGroup=formBuilder.group({
目录代码：['']
});
}
公共onSubmit（）{
const formValue=this.myFormGroup.value；
const params=新的URLSearchParams（）；
Object.keys（formValue）.forEach（key=>{
常量值=formValue[键]；
如果（值===null | |值===undefined | |值====''）{
返回；
}
参数集（键、值）；
});
常量url=`http://localhost:8888/test?${params.toString（）}`；
警报（url）；
this.http.get（url）；
}
}
@NGD模块({
导入：[BrowserModule，FormsModule，ReactiveFormsModule，HttpModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

你必须自己做。这很好，因为你可以选择你需要的确切行为，而不是建立在外部图书馆隐藏的固执己见的虚假行为之上

在lodash中执行此操作的一些方法：

const search = {
  catalogCode: parameters.catalogCode
};

const requestOptions = new RequestOptions({
  // only remove undefined, my preferred option
  search: _.omitBy(search, _.isUndefined)
});

或

或

---

同意，我只是想有一个更方便的方法，但现在必须这样做，谢谢。

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule, ReactiveFormsModule, FormBuilder} from '@angular/forms';
import {HttpModule, Http, URLSearchParams} from '@angular/http';

@Component({
  selector: 'my-app',
  template: `
<form [formGroup]="myFormGroup" (ngSubmit)="onSubmit()">
  <select class="form-control form-control-sm" formControlName="catalogCode" title="Catalog Code">
    <option value="">- Catalog Code -</option>
    <option *ngFor="let option of codes" [value]="option.code">
      {{ option.text }}
    </option>
  </select>

  <button type="submit">Submit</button>
</form>
  `,
})
export class App {

  public myFormGroup;

  public codes = [
    { code: 'option1', text: 'option 1' },
    { code: 'option2', text: 'option 2' },
    { code: 'option3', text: 'option 3' },
  ];

  constructor(private formBuilder: FormBuilder, private http: Http) {
    this.myFormGroup = formBuilder.group({
      catalogCode: ['']
    });
  }

  public onSubmit() {
    const formValue = this.myFormGroup.value;
    const params = new URLSearchParams();

    Object.keys(formValue).forEach(key => {
      const value = formValue[key];
      if(value === null || value === undefined || value === '') {
        return;
      }

      params.set(key, value); 
    });

    const url = `http://localhost:8888/test?${params.toString()}`;

    alert(url);

    this.http.get(url);
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule, HttpModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

const search = {
  catalogCode: parameters.catalogCode
};

const requestOptions = new RequestOptions({
  // only remove undefined, my preferred option
  search: _.omitBy(search, _.isUndefined)
});

  // remove undefined and null (but not empty strings or the number 0)
  search: _.omitBy(search, _.isNil)

  // remove undefined, null, and empty string (but still not the number 0)
  search: _.omitBy(search, x => _.isNil(x) || x === '')