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

 }

所以我的问题是，当我单击下拉菜单并单击一个不显示的选项并且占位符未更改为所选值时。

我尝试遵循有角度的文档和this tutorial，但它似乎对我不起作用...请问我在做什么错？

Answer 1

您需要将值分配给在垫选项中具有选定值的垫选择[(ngModel)]="selectedChoice"。

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

在对话框中选择垫子选择不正确

1 个答案: