Javascript 选择不首先显示所选选项的框

我使用的是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>

它在“选择”框中显示为默认值的空值

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

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

选择用户名

---

Stackblitz:

您需要在选择框中设置如下值：

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 value="">Select User Name</option>

选择用户名

---

将使其工作。

使用角度材质，而不是选择和选项。 例如：

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

{{food.viewValue}

此处有更多详细信息：

添加

[value]=“

反应形式 我非常建议使用ReactiveForms。这样，您将拥有更干净的代码和更强大的选项

首先将反应表单导入您的

应用程序模块

：

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>

选择用户名
{{user.name}

---

解决方案如下所示 下面是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}}

---

他们可以修复现有的问题。没有必要引进更多的图书馆。这是一个解决方案，就像另一个不需要投票表决^ ^ ^取决于你想要什么和风格，我考虑告诉某人使用一个图书馆来解决一个简单的问题作为一个坏的答案。这就像买一辆新车，因为你现在车上的头灯需要更换——这太过分了。正如我所说，它还提供了实用的风格。这也是因为他使用了angular，所以在我看来，实施angular材质或打底（例如打底）可能会很好，但不管怎样，ahahDon并不认为这是个人行为。我认为这是不好的建议，所以我不得不投票否决。继续回答问题，不要把事情放在心上——我们有时都会被否决：）你需要

ngModel

？没有它也行。请看。@ConnorsFan，我确实需要ngModel..

value=”“

为我工作。。。。

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

<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';
}