Angular 7 多个查询字符串,如何
Angular 7 multiple query string, how to
我有一个 asp.net 方法,它接受一个项目列表作为参数。该功能有效并已经过测试。现在这个方法正在被 Angular 使用。我的问题是,如何从 Angular 中成功传递多个参数?
基本上,我正在努力实现这一目标:
localhost:4200/download?item=fname&item=lname&item=cc
正在从 Angular material 个设计复选框传递值。
Asp.Net Core
[HttpGet("downloadbooks")]
public IActionResult Download(IList<string> item)
{
//omitted for simplicity
}
Angular Service
downloadfunction(item: any = []){
return this.http.get(url + `books/downloadbooks?item=${item}`, { headers: new HttpHeaders({'Content-Type': 'application/json',
}), responseType: 'blob'}
);
}
Angular 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>
您可以使用 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)
有 2 种方法可以使用 HttpParams
选项 1
使用设置(即覆盖)
?item=fname,lname,cc
const items = [fname, lname, cc];
this.http.get(url, { params: new HttpParams().set('item', items) })
选项 2
使用 append(通过重新分配 params 变量,因为 HttpParams 是不可变的)
?item=fname&item=lname&item=cc
const items = [fname, lname, cc];
let params = new HttpParams();
items.forEach(i => (params = params.append('item', i)))
this.http.get(url, { params });
我有一个 asp.net 方法,它接受一个项目列表作为参数。该功能有效并已经过测试。现在这个方法正在被 Angular 使用。我的问题是,如何从 Angular 中成功传递多个参数?
基本上,我正在努力实现这一目标:
localhost:4200/download?item=fname&item=lname&item=cc
正在从 Angular material 个设计复选框传递值。
Asp.Net Core
[HttpGet("downloadbooks")]
public IActionResult Download(IList<string> item)
{
//omitted for simplicity
}
Angular Service
downloadfunction(item: any = []){
return this.http.get(url + `books/downloadbooks?item=${item}`, { headers: new HttpHeaders({'Content-Type': 'application/json',
}), responseType: 'blob'}
);
}
Angular 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>
您可以使用 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)
有 2 种方法可以使用 HttpParams
选项 1
使用设置(即覆盖)
?item=fname,lname,cc
const items = [fname, lname, cc];
this.http.get(url, { params: new HttpParams().set('item', items) })
选项 2
使用 append(通过重新分配 params 变量,因为 HttpParams 是不可变的)
?item=fname&item=lname&item=cc
const items = [fname, lname, cc];
let params = new HttpParams();
items.forEach(i => (params = params.append('item', i)))
this.http.get(url, { params });