Angular 2, set default value to select option

I try to add a default value to an option. It will be like a kind of placeholder and I use this method to do it. In pure HTML it work, but if I try to use *ngFor of angular 2 attribute, it doesn't select anything.

Here my code that I use in pure HTML:

  <select name="select-html" id="select-html">
    <option value="0" selected disabled>Select Language</option>
    <option value="1">HTML</option>
    <option value="2">PHP</option>
    <option value="3">Javascript</option>
  </select>

And using Angular template:

 <select name="select" id="select" [(ngModel)]="selectLanguage">
    <option *ngFor="let item of selectOption" 
      [selected]="item.value==0" 
      [disabled]="item.value==0">{{item.label}}</option>
  </select>

The class is

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

@Component({
  moduleId: module.id,
  selector: 'app-form-select',
  templateUrl: 'default.component.html'
})
export class DefaultComponent {
  private selectOption: any;
  constructor() {
    this.selectOption = [
      {
        id: 1,
        label: "Select Language",
        value: 0
      }, {
        id: 2,
        label: "HTML 5",
        value: 1
      }, {
        id: 3,
        label: "PHP",
        value: 2
      }, {
        id: 4,
        label: "Javascript",
        value: 3
      }
    ]
  }
}

I want Select Language to be selected as a default value. It's disabled but not selected.

How can I select it as a default value?

Live example

---

update

4.0.0-beta.6 added compareWith

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

compareFn(c1: Country, c2: Country): boolean {
   return c1 && c2 ? c1.id === c2.id : c1 === c2;
} 

this way the instance assigned to selectedCountries doesn't need to be the identical object, but a custom comparison function can be passed, for example to be able to match an different object instance with identical property values.

original

If you want to use an object as value you need to use [ngValue] on the option element.

  <select name="select" id="select" [(ngModel)]="selectLanguage">
    <option *ngFor="let item of selectOption" [ngValue]="item"
      [disabled]="item.value==0">{{item.label}}</option>
  </select>

When selectLanguage has an options value assigned [(ngModel)]="..." will this one make the one selected by default:

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

@Component({
  moduleId: module.id,
  selector: 'app-form-select',
  templateUrl: 'default.component.html'
})
export class DefaultComponent {
  private selectOption: any;
  constructor() {
    this.selectOption = [
      {
        id: 1,
        label: "Select Language",
        value: 0
      }, {
        id: 2,
        label: "HTML 5",
        value: 1
      }, {
        id: 3,
        label: "PHP",
        value: 2
      }, {
        id: 4,
        label: "Javascript",
        value: 3
      }
    ];
    this.selectLanguage = this.selectOption[0];
  }
}

---

我发现删除selectOption数组中的默认选项并单独指定默认的不可选选项会更好。

<select name="select" id="select" [(ngModel)]="selectLanguage">
  <option [ngValue]="undefined" disabled>Select Language</option>
  <option
         *ngFor="let item of selectOption"
         [value]="item.value"
  >
    item.label
  </option>
</select>

---

Try below sample code for this:
Replace yourValue with whatever value you want to select default

<select  placeholder="country" >
       <option *ngFor="let country of countriesList" [ngValue]="country" [selected]="country.country_name == yourValue" >
             {{country.country_name}}
       </option>
</select>

链接地址: http://www.djcxy.com/p/70598.html

上一篇: 如何将占位符文本添加到下拉菜单中

下一篇: Angular 2，将默认值设置为选择选项