варианты не отображаются или выбираются в mat-select

Question

Я хочу предварительно выбрать некоторые параметры в поле mat-select в моей форме Angular, поэтому у меня есть этот код в файле 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']);    
        }

    });
}

Вот входной файл выбора mat:

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

Моя проблема в том, что значение selectedApps не отображается внутри поля, даже если значения правильно помещены в массив.почему это?

Answer 1

Я добавил несколько фиктивных данных в файл component.ts и вижу выбранные приложения в поле формы.

в файле шаблона

<form>
  <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" [value]="app.value">{{app.name
    }}</mat-option> </mat-select> </mat-form-field>
  </div>

и в файле ts:

export class SelectFormExample {
selectedApps: string;
 appsList = [
 {value: 'app_1', results: 'App1-result', name: 'APP 1'},
{value: 'app_2', results: 'App2-result', name: 'APP 2'},
{value: 'app_3', results: 'App3-result', name: 'APP 3'}
];

getAppList(){
    console.log('getAppList');
  }

Answer 2

Вы «предварительно выбираете» имена

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

, в то время как ваши параметры содержат идентификаторы

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

Чтобы все заработало, selectedApps оставьте те же значения, которые доступнына mat-option [value] собственности.В конце концов, это и будет фактическим значением mat-select.

Если честно, я бы сделал целое значение app, поскольку нет никаких причин для его угрозы в противном случае.Это упростило бы большую часть кода.