Angular 选择默认选项

Question

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

有人有解决办法吗？

谢谢大家！

Answer 1

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

Answer 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' },
  ];
}

Here's a Working Sample StackBlitz for your ref.

Answer 3

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

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

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

这个有效：

singelCar = null;

这不是：

singleCar;

Angular 选择默认选项

Angular make a default option selected

forms

select

option

angular