Angular4 ausgewählte Option verschwindet nach der Auswahl in "select" Tag

Question

Ich habe ein Problem in meiner Angular 4-Anwendung mit einem generierten Formular, und genauer mit einem <select> Tag, wo seine <option> Tags dynamisch generiert werden.

Ich habe eine vereinfachte Version meines Codes in plunker.

Das Problem tritt sofort auf, nachdem ich eine Option auswähle, die nicht die erste Standardoption undefined ist: der Codewert ist richtig eingestellt, aber der Text innerhalb des <option> Tags verschwindet.

Wie könnte ich das beheben?

Answer 1

ändern [ngValue] in Optionen auf [Wert]

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

Dies funktioniert. Diese

Answer 2

ist die Lösung:

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

Warum verwenden Sie getEntries() Funktion direkt entries Array in Ihrem class App wie unten Code

//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 {}