选择框不首先显示所选选项答案

【问题标题】：Select box not showing the selected option first选择框不首先显示所选选项
【发布时间】：2018-08-21 13:08:01
【问题描述】：

我正在使用 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>

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

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

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

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

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

【问题讨论】：

你需要ngModel吗？没有它也可以工作。见this stackblitz。
@ConnorsFan，我确实需要 ngModel ..value=" " 为我工作....

标签： javascript angular typescript angular-forms

【解决方案1】：

解决方法如下以下是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

【讨论】：

【解决方案2】：

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

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

会成功的。

【讨论】：

【解决方案3】：

添加[value]=""

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

如果你想隐藏禁用选项然后添加hidden属性

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

【讨论】：

【解决方案4】：

反应式表单

我非常建议使用 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>

【讨论】：

【解决方案5】：

使用角度材质而不是选择和选项。比如这样：

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

【讨论】：

他们可以修复他们拥有的东西。没有必要引入更多的库。
这是一个像另一个不需要投票的解决方案^^取决于你想要什么和风格
我认为告诉某人使用库来解决一个简单的问题是一个错误的答案。这就像买一辆新车，因为你现在的车里的车头灯需要更换——这太过分了。
正如我所说，它还提供了实现的样式。这也是因为他使用了 angular，所以在我看来，实现 angular material 或 primeNG 可能会很好，但无论如何啊
不要把它当作个人。我认为这是不好的建议，所以我不得不否决它。继续回答问题，不要把事情放在心上——我们有时都会被否决:)