「選択」タグで選択した後、Angular4選択されたオプションが消える

Question

私のAngular 4アプリケーションでは、生成されたフォームで、より正確には<select>タグの<option>タグが動的に生成されます。

私はplunkerに私のコードの簡易版を作りました。

最初のデフォルトundefinedオプションではないオプションを選択した直後に問題が発生します。コード値は正しく設定されていますが、<option>タグ内のテキストは消えます。

私はそれを修正することができますか？

Answer 1

変更は、[ngValue] [値]のオプションで

<select [(ngModel)]="value"> 
    <option [ngValue]="undefined">(undefined)</option> 
    <option *ngFor="let entry of getEntries()" [value]="entry.code">{{entry.label}}</option> 
</select> 

これは動作します。

Answer 2

これが解決策です：

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>Hello world</h1> 
    <p>Please select one option : </p> 
    <select (change) = 'myfun($event)' [value] = 'this.value'> 
     <option *ngFor="let entry of getEntries()" [selected]= 'this.value' (value)="entry.code" >{{entry.label}}</option> 
    </select> 
    <p>Selected value : {{value}}</p> 
    `, 
}) 
export class App { 
    value:string 

    constructor() { 
    } 

    myfun(event){ 
    console.log(event.target.value) 
    this.value = event.target.value; 
    } 

    getEntries() { 
    const entries = []; 
    entries.push({code:"1", label:"abra"}); 
    entries.push({code:"2", label:"kadabra"}); 

    return entries; 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, FormsModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Answer 3

は、なぜあなたは、おかげであなたが直接、正常に動作し、あなたのclass App

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>Hello world</h1> 
    <p>Please select one option : </p> 
    <select [(ngModel)]="value"> 
     <option [ngValue]="undefined">(undefined)</option> 
     <option *ngFor="let entry of entries" [ngValue]="entry.code">{{entry.label}}</option> 
    </select> 
    <p>Selected value : {{value}}</p> 
    `, 
}) 
export class App { 
    value = undefined; 
    entries=[{code:"1", label:"abra"},{code:"2", label:"kadabra"}]; 
    constructor() { 
    } 


} 

@NgModule({ 
    imports: [ BrowserModule, FormsModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

コード以下のよう