Angular /在每次修改select时发送另一个get请求

Question

我有两个select，其中一个select选择汽车，另一个select使用get请求获得该汽车的特定型号。

component.html

<mat-form-field appearance="fill">
<mat-label>Brand</mat-label>
<mat-select multiple formControlName="Brand" (selectionChange)="getModels($event)">
<mat-option *ngFor="let item of vehicles" [value]="item">{{item}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>მოდელი</mat-label>
<mat-select multiple formControlName="VehicleCategory">
<mat-option *ngFor="let item of inputValue" [value]="item">{{item}}</mat-option>
</mat-select>
</mat-form-field>

所以在每个选择题中，它用逗号分隔请求，像这样:

http://localhost:5001/api/Vehicle/Brands/BENTLEY,DACIA,AUDI,HONDA/Models 

下面是我所做的代码:

component.ts

getModels(form) {
// get models
this.inputValue = this.newCampaignForm.get("Brand").value;
this.campaignService.getModels(this.inputValue).subscribe((data: any[])=>{
this.inputValue = data;
});
}

service.ts

public getModels(inputValue: string){
return this.http.get(this.API_SERVER + '/Vehicle' + '/Brands' + '/' + inputValue + '/Models');
}

我想要的是每次你选择选项新的api调用被调用，而不是用逗号。

，例如:

http://localhost:5001/api/Vehicle/Brands/OPEL/Models
http://localhost:5001/api/Vehicle/Brands/BMW/Models

Answer 1

你需要循环遍历你的选择

getModels(event: any) {
let value = event.value;
value.forEach((item: any) => {
console.log(item);
this.campaignService.getModels(item).subscribe((data: any[]) => {
this.inputValue = [...this.inputValue, ...data];
});
});
}

，然后您将能够将单个品牌传递到您的服务。

Here Stackblitz示例:https://stackblitz.com/edit/angular-sqkbdp-fx49j4?file=src%2Fapp%2Fselect-multiple-example.ts