коврик в диалоговом окне не выбирается должным образом

Question

Я пытаюсь реализовать функциональность, в которой пользователю предлагается диалоговое окно, в котором ему предлагается выбрать значение в раскрывающемся меню и подтвердить свой выбор кнопкой «ОК».Я использую Angular Material для достижения этой цели.Но у меня есть проблема с mat-select внутри диалога, так как он не показывает или не возвращает выбранную опцию.

Вот мой диалог HTML-код

<h1 mat-dialog-title>Saving choice ... </h1>
<div mat-dialog-content>
  <p>Please selected an option</p>
  <mat-form-field>
  <mat-select placeholder="Which option?" [(ngModel)]="selectedChoice" >
  <mat-option>None</mat-option>
  <mat-option *ngFor="let opt of data.options">{{opt.name}}</mat-option>
  </mat-select>
 </mat-form-field>
</div>
<div mat-dialog-actions>
 <button mat-button (click)="onNoClick()" >Back</button>
 <button mat-button (click)="confirmSelection()" cdkFocusInitial >Save</button>
</div>

И это Компонент tsкод:

export class SaveChoiceDialog {

   selectedChoice : string;

   constructor(
     public dialogRef: MatDialogRef<SaveChoiceDialog>,
     @Inject(MAT_DIALOG_DATA) public data: { options : Option[]}) {}


   onNoClick(): void {
     this.dialogRef.close();
    }

   confirmSelection(): void {
     this.dialogRef.close(this.selectedChoice)
    }

 }

Поэтому моя проблема заключается в том, что я щелкаю раскрывающееся меню и выбираю параметр, который не отображается, а заполнитель не изменяется на выбранное значение.

Я пытался следовать угловому документу и этому уроку , но мне это не помогло ... что я делаю не так, пожалуйста?

Answer 1

Вам необходимо присвоить значение mat-select [(ngModel)]="selectedChoice" с выбранным значением в mat-option.

<mat-option *ngFor="let opt of data.options" [value]="opt.valueOf">{{opt.name}}</mat-option>