Mat-Select возвращает неопределенное

Question

Я работаю с угловым материалом и использую Mat-Select.Когда пользователь делает выбор, я хочу получить пользователя, который на самом деле является объектом со свойством Id и описанием.

<mat-form-field>
    <mat-select placeholder="Select User Type"  (selectionChange)="selectUserType(user)">
        <mat-option  *ngFor="let user of userTypeList" [value]="user.description">
            {{ user.description }}
        </mat-option>
    </mat-select>
</mat-form-field> 

Когда пользователь делает выбор, я получаю здесь неопределенное значение:

public selectUserType(userType: OxygenUserType) {
    console.log('selected');
    this.selectedUserType = userType;
    console.log(this.selectedUserType);
}

Я также пытался (selectionChange)="selectUserType($event.value)", но это не производит объект.Мне нужно, чтобы выбор пользователя был объектом, который выглядит следующим образом:

{id:1, description:Agent},
{id:2, description:Dealer}

Этот объект основан на этом интерфейсе

export interface OxygenUserType {
    id: number;
    description: string;
}

Answer 1

Я думаю, что ваш путь не работает, потому что вы объявляете своего пользователя в mat-option, поэтому mat-select не знает об этом.

Я бы решил эту проблему, используя модель, чтобы вам не требовалась функция для сохранения вашего значения.Если вы хотите сделать что-то еще при изменении модели, вы можете вызвать свое значение из модели в вашей функции изменения.

поэтому ваш html будет:

<mat-form-field>
  <mat-select placeholder="Select User Type" [(ngModel)]="selectedUserType" (change)="selectUserType()">
    <mat-option *ngFor="let user of userTypeList" [value]="user">
      {{ user.description }}
    </mat-option>
  </mat-select>
</mat-form-field>

и в вашем методе:

  public selectUserType() {
    console.log('selected');
    console.log(this.selectedUserType);
    // do some stuff with your value.
  }

Answer 2

Вы можете использовать [(value)] для установки выбранного пользователя.В значении опции присвойте пользовательский объект , а не только описание как:

<mat-select placeholder="Select User Type" [(value)]="selectedUserType" (selectionChange)="onUserTypeChange()">
    <mat-option  *ngFor="let user of userTypeList" [value]="user">
        {{ user.description }}
    </mat-option>
</mat-select>


public onUserTypeChange() {
    console.log(this.selectedUserType);
}