the options are not showing or being selected in mat-select

0

Issue

I want to preselect some options inside mat-select field in my Angular Form, so I have this code in typescript file:

selectedApps = [];
ngOnInit() {
    const url = this.baseUrl + `/projects/${this.id}`;
    this.httpClient.get(url).subscribe((data: Array<any>) => {
        for (let i=0; i<data['results'][0]['apps'].length; i++) {
            this.selectedApps.push(data['results'][0]['apps'][i]['name']);    
        }

    });
}

Here is the mat-select input fild:

          <div class="col-sm-8 float-left">

        <mat-form-field> <mat-select
          [(value)]="selectedApps" 
          placeholder="Select the associated applications ..."
          multiple (click)="getAppList();"> <mat-option
          *ngFor="let app of appsList?.results" [value]="app.id">{{app.name
        }}</mat-option> </mat-select> </mat-form-field>
      </div>

My problem is that the value of selectedApps does not show inside the field, even that the values are properly pushed inside the array. why is that?

Solution

You are “preselecting” names

this.selectedApps.push(data['results'][0]['apps'][i]['name']);  

while your options contains ids

<mat-option
          *ngFor="let app of appsList?.results" [value]="app.id">{{app.name
        }}</mat-option>

In order to get it work, selectedApps mush keep the same values that are available on mat-option [value] property. After all, this is what will be the actual mat-select value.

To be honest, I would make whole app as a value as there is no reason to threat it orherwise. It would simplify much of code.

Answered By – Antoniossss

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More