Угловой 2, RC5 - выпадающее меню имеет дополнительную опцию «призрака»

Question

Использование Angular 2, RC 5, я создаю форму для создания нового объекта модели. В раскрывающемся списке показаны параметры модели. Когда я перекодирую код, в раскрывающемся списке отображается дополнительный пробел < >, хотя он фактически не создан в DOM. Это как будто есть призрак < вариант > в верхней части списка.

В следующем примере я создал модель с именем Example, которая имеет параметры «id» и «name».

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]="">Choose one</option> 

к этому

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

Answer 2

Это время, вызванное этой линии.

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

Я не знаю, почему значение текста внутри тегов не отображается изначально при загрузке страницы (возможно, из-за тот случай нагрузки с указанием выбора элемента до загрузки модели?), Но вы 're-код статически записывает этот тег в select, затем динамически добавляет дополнительные теги опций из вашего списка. Если вы удалите эту строку, значение «фантом» исчезнет, ​​и если вы нажмете на нее, она отобразит предполагаемое текстовое значение.

Я думаю, что вы ищете что-то вроде этого, если вы хотите сохранить выбрать тег

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