在 "select" 标签中选择后，Angular4 选择的选项消失

Question

我的 Angular 4 应用程序有生成的表单问题，更准确地说，有一个 <select> 标签，其中 <option> 标签是动态生成的。

我在 plunker 中制作了我的代码的简化版本。

我遇到的问题是在我 select 不是第一个默认 undefined 选项的选项之后立即出现的：代码值设置正确，但 <option> 中的文本标签消失。

我该如何解决？

Answer 1

将选项中的 [ngValue] 更改为 [value]

<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() 函数你可以直接在 class App 中使用 entries 数组，如下面的代码

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

在 "select" 标签中选择后，Angular4 选择的选项消失

Angular4 selected option disappears after selection in "select" tag

javascript

angular

html-select

angular-forms