Angular 7多个查询字符串，如何答案

【问题标题】：Angular 7 multiple query string, how toAngular 7多个查询字符串，如何
【发布时间】：2019-09-18 11:18:09
【问题描述】：

我有一个 asp.net 方法，它接受项目列表作为参数。该功能有效并且已经过测试。现在这个方法被 Angular 使用了。我的问题是，如何在 Angular 中成功传递多个参数？

基本上，我正在努力实现这一目标：

localhost:4200/download?item=fname&item=lname&item=cc

值是从 Angular 材料设计复选框传递的。

Asp.Net 核心

[HttpGet("downloadbooks")]
public IActionResult Download(IList<string> item)
{
  //omitted for simplicity
}

角度服务

downloadfunction(item: any = []){
  return this.http.get(url + `books/downloadbooks?item=${item}`,  { headers: new HttpHeaders({'Content-Type': 'application/json',
      }), responseType: 'blob'}
    );
}

角度 TS

fname;
fnameChecked = false;

lname;
lnameChecked = false;

cc;
ccChecked = false;


  onfnameChecked() {
    this.fname= ""
    if (this.fnameChecked) {
      this.fname = "fName"
    }
  }

  onlnameChecked() {
    this.lname= ""
    if (this.lnameChecked) {
      this.lname = "lName"
    }
  }

 onccChecked() {
    this.cc= ""
    if (this.ccChecked) {
      this.cc= "cc"
    }
  }

downloadBooks(){

//I want to pass multiple parameters within the dowloadfunction()
//only one parameter is passed at the moment.

 this.downloadService.downloadfunction(this.fname).subscribe(blob => {
 link.href= window.URL.createObjectURL(blob);
})
}

Angular html


    <mat-checkbox class="example-margin" name="fnameChecked" [(ngModel)]="fnameChecked" [checked]="fnameChecked" (change)="onfnameChecked()">First name</mat-checkbox>

    <br />
    <mat-checkbox class="example-margin" name="lnameChecked" [(ngModel)]=" lnameChecked " [checked]=" lnameChecked " (change)="onlnameChecked()">Last Name </mat-checkbox>
    <br />
<mat-checkbox class="example-margin" name="ccChecked" [(ngModel)]="ccChecked " [checked]=" ccChecked " (change)="onccChecked()">Credit card</mat-checkbox>

  <button mat-raised-button [mat-dialog-close]="" color="primary" (click)="downloadBooks()"><a [target]="'_blank'">Submit</a></button>

【问题讨论】：

为什么不将参数串联起来，然后将其附加到服务中的 URL 上？
@Chris 感谢您的反馈。那会是什么样子？
只需在http.get 调用中将HttpParams 与params 中的所有参数一起传递。
@JessedeWit 感谢您的评论。我正在查看角度文档。我找不到一个例子。你能告诉我怎么做吗？

标签： c# typescript angular-material url-routing angular7

【解决方案1】：

您可以使用HttpParams 来实现。

const item = [fname, lname, cc];
const options = {
  headers: new HttpHeaders({'Content-Type': 'application/json'}),
  params: new HttpParams().set('item', JSON.stringify(item))
};

this.http.get(url, options)

【讨论】：

param1 和 param2 似乎只有在你有这样的东西时才有效 => localhost:5000/api/book?param1=item1&param2=item2 我正在寻找的是 localhost:5000/api/book?item=fname&item=lname&item=cc 有没有另一种写这个的方法？
知道了。所以你真的想传递一个数组作为 item 的值？
这正是我正在寻找的。如何传递数组？
感谢您的反馈。不幸的是，这并没有为我做。计划是使用复选框将值传递给函数。因此，如果我选择 1 个复选框，我期待的是：localhost:5000/api/book?item=fname。如果我选择 2 个复选框，我希望这样：localhost:5000/api/book?item=fname&item=lname 等等。
好的。那我建议你看看这些问题：github.com/angular/angular/issues/11662和github.com/angular/angular/pull/11373

【解决方案2】：

您可以通过两种方式使用HttpParams

选项 1

使用设置（即覆盖）

?item=fname,lname,cc

const items = [fname, lname, cc];

this.http.get(url, { params: new HttpParams().set('item', items) })

选项 2

使用追加

?item=fname&item=lname&item=cc

const items = [fname, lname, cc];

const params = new HttpParams();
items.forEach((i) => params.append('item', i))
this.http.get(url, { params: params });

【讨论】：