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

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

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

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

这有效：

singelCar = null;

这不是：

singleCar;

Answer 2

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

Answer 3

值存在一些问题，在某些情况下，您使用的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 个答案: