相关疑难解决方法(0)

我有一个只包含表单的简单组件:

import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2';


@Component({
  selector: 'test-component',
  directives: [FORM_DIRECTIVES, NgFor],
  template: `
    <form class="form-inline" (ng-submit)="onSubmit()" #form="form">
      <div class="form-group">
        <select class="form-control" 
          [(ng-model)]="model.server" 
          ng-control="server" 
          #server="form" 
          required>
          <option selected hidden>placeholder</option>
          <option *ng-for="#server of servers" 
            [value]="server">{{ server | uppercase }}
          </option>
        </select>
      </div>
      <div class="form-group">
        <input class="btn btn-primary" type="submit" value="Load"
          [disabled]="!form.form.valid">
      </div>
    </form>
  `
})
export class TestComponent {
  public model: Model = new Model();
  public servers: string[] = ['a', 'b', 'c'];

  onSubmit(): void {
    // Complicated logic.

    // Reset form. …

我想使用HTML 设置一个<select>默认值<option>,并使用<select>双向绑定到我的模型填充其余部分.

HTML:

<select class="form-control" required
        [(ngModel)]="model.product"
        ngControl="product">
    <option value="">Select a product</option>
    <option *ngFor="#product of products" [value]="product">{{product}}</option>
</select>

模型:

products: string[] = [
    'Foo',
    'Bar'
];

现在发生的是我的select绑定到模型,它是:

model: Entry = new Entry();

因此,product属性中没有默认值,因此<select>绑定到任何值.我的意思是,这是按预期工作的.

我试图弄清楚如何获得默认值以显示<select>在我的模型中,并且我想在我的模型中没有硬编码UI值并在我的模型的新实例中默认值的情况下这样做.Angular 2有办法解决这个问题吗？

编辑:

结果HTML应如下所示:

<select>
  <option value>Select a product</option>
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
</select>