javascript - 角度2，设置默认值以选择选项(Angular 2, set default value to select option)

Question

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.

(在纯HTML中，它可以工作，但是如果我尝试使用angular 2属性的*ngFor ，则不会选择任何内容。)

Here my code that I use in pure HTML:

(这是我在纯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:

(并使用Angular模板：)

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

(我希望将“ Select Language选择为默认值。)

It's disabled but not selected.

(已禁用但未选中。)

How can I select it as a default value?

(如何选择它作为默认值？)

Live example

(现场例子)

  ask by Radonirina Maminiaina translate from so

Answer 1

update

(更新)

4.0.0-beta.6 added compareWith

(4.0.0-beta.6添加了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.

(这样，分配给selectedCountries的实例不必是相同的对象，但是可以传递自定义比较函数，例如，以便能够将具有相同属性值的不同对象实例进行匹配。)

original

(原版的)

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

(如果要将对象用作值，则需要在option元素上使用[ngValue] 。)

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

(当selectLanguage的选项值分配为[(ngModel)]="..."时，该值将默认选择一个：)

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