Question

使用Angular 2，RC 5，我正在构建一个表单来创建一个新的模型对象。下拉列表显示模型的选项。当我将代码转换为额外的空白＆lt;选项＆gt;显示在下拉列表中，但实际上并未在DOM中创建。好像有一个鬼＆lt;选项＆gt;在列表的顶部。

在下面的示例中，我创建了一个名为Example的模型，其参数为＆＃34; id＆＃34;和＆＃34;名称＆＃34;。

import {Component} from '@angular/core';
import {Example} from './example-model';

@Component({
  selector: 'my-app',
  template: `
    <form>
      <h2>Dropdown</h2>

      <select name="name" [(ngModel)]="example.name">
        <option [value]="">Choose one</option>
        <option *ngFor="let option of dropdown" [value]="option.val">
          {{option.name}}
        </option>
      </select>
    </form>
  `,
})

export class AppComponent {
  public example: Example;
  public dropdown: {val: number, name: string}[] = [];

  public ngOnInit(): void {
    this.example = new Example();
    this.dropdown = this._getDropdownValues();
  }

  private _getDropdownValues(): {val: number, name: string}[] {
    return [
      {val: 10, name: "Name #1"},
      {val: 20, name: "Name #2"},
      {val: 30, name: "Name #3"}
    ];
  }
}

为什么我会得到鬼＆lt;选项＆gt;在我的下拉列表中？

您可以在Plunkr上找到完整示例。我收录了一些评论者和＃39;关于如何解决问题的建议，遗憾的是也不起作用。

Answer 1

尝试为第一个选项指定一个值。即，改变这个

<option [value]="">Choose one</option>

到这个

<option [value]="XX">Choose one</option>

Answer 2

这是由这条线引起的。

<option [value]="">Choose one</option>

我不确定为什么当页面加载时标签内的文本值最初没有显示（可能是因为加载事件顺序在模型加载之前显示了select元素？），但是你的代码是静态的将此标记写入选择，然后从列表中动态添加其他选项标记。如果删除此行，“幻像”值将消失，如果单击它，它将显示预期的文本值。

如果你想保留选择标签

，我认为你正在寻找类似的东西

 <option disabled="disabled">Choose one</option>

Angular 2，RC5 - 表格下拉有额外的＆＃34;鬼＆＃34;选项

2 个答案: