angular - las opciones no se muestran ni se seleccionan en mat-select

Quiero preseleccionar algunas opciones dentro del campo mat-select en mi formulario Angular, así que tengo este código en el archivo typescript:

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

Aquí está el campo de entrada mat-select:

<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>

Mi problema es que el valor de selectedApps no se muestra dentro del campo, incluso cuando los valores se añaden correctamente al array. ¿Por qué es eso?

Respuesta #1

Es por los z-index conflictivos. ¿Estás renderizando mat-select dentro de una especie de ventana modal emergente?

Espero que esto funcione:

Pon este estilo en tu hoja de estilos global llamada styles.css o .scss

 .cdk-global-overlay-wrapper, .cdk-overlay-container {
     z-index: 99999 !important;
  }

Respuesta #2

Estás "preseleccionando" nombres

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

mientras tus opciones contienen identificadores

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

Para que funcione, selectedApps debe mantener los mismos valores que están disponibles en la propiedad mat-option [value]. Después de todo, esto será el valor real de mat-select.

Para ser honesto, yo haría toda la app como un valor ya que no hay razón para tratarlo de otra manera. Esto simplificaría gran parte del código.