web-dev-qa-db-ja.com

Angular 2、デフォルト値を設定してオプションを選択

オプションにデフォルト値を追加しようとしました。それは一種のプレースホルダーのようになり、 this method を使用して実行します。純粋なHTMLでは動作しますが、*ngFor of angular 2属性、何も選択しません。

ここで、純粋な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>

そして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>

クラスは

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

が欲しいです Select Languageをデフォルト値として選択します。無効になっていますが、選択されていません。

デフォルト値として選択するにはどうすればよいですか？

実例

javascriptangularangular2-forms
14
Radonirina Maminiaina

update

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

この方法では、selectedCountriesに割り当てられたインスタンスは同一のオブジェクトである必要はありませんが、たとえば、同じプロパティ値を持つ別のオブジェクトインスタンスと一致させるために、カスタム比較関数を渡すことができます。

オリジナル

オブジェクトを値として使用する場合は、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>
_

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];
  }
}
_
22
Günter Zöchbauer

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>
14
Ben Schenker

以下のサンプルコードを試してください。
yourValueをデフォルトを選択する値に置き換えます

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