Select 框未首先显示所选选项

Question

我正在使用 angular 6，但我无法在 select 框中默认显示 selected 选项，

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>

Ts:

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"
    }
  ]
}

select 框中默认显示空值。

如何在行中的 select 框中将 selected 选项显示为默认选项？

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

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

Answer 1

您需要像这样在 select 框中设置一个值：

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

会成功的。

Answer 2

使用 angular material 而不是 select 和选项。例如：

   <mat-form-field>
      <mat-select placeholder="Select User Name">
        <mat-option *ngFor="let user of userList" [value]="user.uid">
          {{food.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

此处有更多详细信息：https://material.angular.io/components/select/overview

Answer 3

添加[value]=""

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

如果您想隐藏禁用选项，请添加 hidden 属性

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

Answer 4

ReactiveForms

我非常建议使用 ReactiveForms。这样您将拥有更简洁的代码以及更强大的选项。

首先将 ReactiveForms 导入您的 app.module:

import {FormsModule, ReactiveFormsModule} from '@angular/forms';
...
   imports: [
      ...
      ReactiveFormsModule
      ...
   ]

然后在你的控制器中：

myForm: FormGroup;
constructor(private fb: FormBuilder){
    this.myForm = this.fb.group({
          username: null
      })
}

在您的模板中：

<form [formGroup]="myForm">
   <select formControlName="username" placeholder="Select Username">
        <option disabled selected>Select User Name</option>
        <option *ngFor="let user of userList" [value]="user.uid">{{user.name }}</option>
  </select>

Answer 5

解决方法如下以下是 html

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

以下是控制器

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"
    }
  ];
  selected = 'Select User Name';
}

stackblitz

Select 框未首先显示所选选项

Select box not showing the selected option first

javascript

angular

typescript

angular-forms

ReactiveForms