角2、RC5 - フォームのドロップダウンに「ゴースト」オプションが追加されました

Question

角2、RC 5を使用して、新しいモデルオブジェクトを作成するためのフォームを作成しています。ドロップダウンにはモデルのオプションが表示されます。コードをトランジリエートすると、追加の空白<オプション>がドロップダウンに表示されますが、実際にはDOMでは作成されません。これは、リストの一番上に幽霊<オプション>があるかのようです。

次の例では、 "id"と "name"のパラメータを持つExampleという名前のモデルを作成しました。

import {Component} from '@angular/core'; 
import {Example} from './example-model'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form> 
     <h2>Dropdown</h2> 

     <select name="name" [(ngModel)]="example.name"> 
     <option [value]="">Choose one</option> 
     <option *ngFor="let option of dropdown" [value]="option.val"> 
      {{option.name}} 
     </option> 
     </select> 
    </form> 
    `, 
}) 

export class AppComponent { 
    public example: Example; 
    public dropdown: {val: number, name: string}[] = []; 

    public ngOnInit(): void { 
    this.example = new Example(); 
    this.dropdown = this._getDropdownValues(); 
    } 

    private _getDropdownValues(): {val: number, name: string}[] { 
    return [ 
     {val: 10, name: "Name #1"}, 
     {val: 20, name: "Name #2"}, 
     {val: 30, name: "Name #3"} 
    ]; 
    } 
} 

は、なぜ私は私のドロップダウンにゴースト<オプション>を取得していますか？

完全な例はPlunkrです。残念ながら問題を解決する方法についてのコメントを提出しました。

Answer 1

最初のオプションに値を割り当ててください。すなわち、それは、この行によって引き起こされています。この

<option [value]="XX">Choose one</option> 

Answer 2

にこの

<option [value]="">Choose one</option> 

を変更。

<option [value]="">Choose one</option> 

私は、タグ内のテキスト値が最初に表示されない理由はよく分からないとき（おそらくモデルがロードされる前に、select要素を示す？loadイベントのための）ページがロードされています're codeはこのタグを静的にselectに書き込み、リストから追加のオプションタグを動的に追加します。この線を削除すると、「ファントム」の値が消え、クリックすると目的のテキスト値が表示されます。

私は、あなたが「のいずれかを選択します」オプションは、ブランク値を持っている必要があります。この場合、タグ

<option disabled="disabled">Choose one</option>