使用双向绑定在<select>中默认Angular2 <option>

Question

我想使用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>

Answer 1

我不认为Angular有办法解决这个问题.你必须做一些工作:

<select class="form-control" required [(ngModel)]="model.product">
  <option *ngFor="#product of [defaultStr].concat(products)" 
   [value]="product === defaultStr ? null : product">
     {{product}}
  </option>
</select>

defaultStr = 'Select a product';
model = { product: null };
products: string[] = [
  'Foo',
  'Bar'
];

Plunker

由于您使用NgModel绑定所选值,因此必须将bound属性设置为最初的默认值null,否则默认情况下不会选择该选项:

model = { product: null };

有了null,我注意到HTML是

<option value="null">Select a product</option>

因此,您可能更喜欢使用空字符串''而不是null:

[value]="product === defaultStr ? '' : product"

model = { product: '' };

然后是HTML

<option value="">Select a product</option>

Answer 2

我这样做了它对我有用:

<select name="Products" #Products="ngModel" [(ngModel)]="products">
  <option [ngValue]="products">-- Select product --</option>
  <option *ngFor="let p of productsList" [ngValue]="p">{{p.name}}</option>
</select>

[ngValue]="products"表示到[(ngModel)]="products".

在此之前,我有<option value="">-- Select product --</option>,然后它渲染到:空白选项, - 选择产品 - 和我的产品列表.