javascript - 在“选择”标签中选择后，Angular4选择的选项消失了

Question

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

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

我遇到的问题在我选择一个不是第一个默认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

为什么要使用函数，您可以在下面的代码 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 {}

Answer 3

这是解决方案：

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