typescript - Angular / send another get request on every change on select

Question

I have two selects where with one select you choose cars and on another select you get specific models for that car with get request.

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>

so on every multiple choice it seperates request with commas like this:

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

here is the code i did for that:

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

What i want is for every time you select option new api call gets called, not with commas.

like this for example:

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

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

question from:https://stackoverflow.com/questions/66053410/angular-send-another-get-request-on-every-change-on-select

Answer 1

You need to loop through your selection

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

and then you will able to pass the single brand to your service.

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