Angular选择了一个默认选项答案

【问题标题】：Angular make a default option selectedAngular选择了一个默认选项
【发布时间】：2019-06-18 03:18:31
【问题描述】：

我正在使用 angular5。我想将一个选项选为默认选项。但是当我使用 ngModel 指令时，我的代码不再起作用。

这是我的代码：

<select  class="form-control"  [ngModelOptions]="{standalone: true}" [(ngModel)]="singleCar">
                    <option value="null"  selected='true' disabled>select car </option>
                    <option [ngValue]="Car"  *ngFor="let car of allCars">{{singleRole.name}}</option>
            </select>

有人有解决办法吗？

谢谢各位！

【问题讨论】：

标签： angular forms select option

【解决方案1】：

您必须在 html 中执行此操作：

<option [ngValue]="null">Select a car</option>

并且在您的组件中，您必须指定默认值为 null。

这行得通：

singelCar = null;

这不是：

singleCar;

【讨论】：

【解决方案2】：

这些值存在一些问题，在某些情况下，您使用的 directives。

在您的模板中尝试一下：

<select 
  class="form-control"
  [(ngModel)]="singleCar">
  <option 
    value="null"
    disabled>
    Select A Car
  </option>
  <option 
    [value]="car" 
    *ngFor="let car of allCars">
    {{car.name}}
  </option>
</select>

在你的组件中：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  singleCar = { name: 'Car 4' };

  allCars = [
    { name: 'Car 1' },
    { name: 'Car 2' },
    { name: 'Car 3' },
    { name: 'Car 4' },
    { name: 'Car 5' },
  ];
}

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

我在您的示例中检查了您的示例“选择汽车”默认情况下也未选中

【解决方案3】：

尝试删除option value="null"。默认情况下，设置第一个选项值。

【讨论】：

删除 value="null" 并不能解决问题