在“选择”标签中选择后，选择的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

你为什么要使用getEntries()功能，您可以直接使用entries阵列在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 {}