选择框未先显示所选选项

Question

我正在使用 angular 6，但无法在选择框中将所选选项显示为默认值，

HTML包括，

<select class="form-control selectBox" name="username" #username="ngModel" required ngModel>
<option disabled selected>Select User Name</option>
<option *ngFor="let user of userList" [value]="user.uid">{{user.name }}</option>
</select>

:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  userList: any = [
    {
      "name" : "Test User"
    },
    {
      "name" : "Hello World"
    },
    {
      "name" : "User Three"
    }
  ]
}

它在选择框中默认显示空值。

如何在行中的选择框中将所选选项显示为默认值？

<option disabled selected>Select User Name</option>

Stackblitz：https ://stackblitz.com/edit/angular-wfjmlm

Answer 1

您需要在选择框中设置一个值，如下所示：

<option disabled selected value="">Select User Name</option>

会让它工作。