我想设置一个<select>有默认的<option>使用 HTML，并填充其余部分<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>
Model:
products: string[] = [
'Foo',
'Bar'
];
现在发生的事情是我的选择绑定到模型，即：
model: Entry = new Entry();
所以，里面没有默认值product财产，因此<select>不绑定任何东西。我的意思是，这正在按预期工作。
我正在尝试找出如何让默认值显示在<select>不过，我想这样做，而不需要在模型中硬编码 UI 值，并在模型的新实例中默认该值。 Angular 2 有办法解决这个问题吗？
Edit:
结果 HTML 应如下所示：
<select>
<option value>Select a product</option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
</select>
我认为 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 http://plnkr.co/edit/Sh2HQJgHkGV44lN1ppS8?p=preview
由于您使用 NgModel 来绑定所选值，因此您必须首先将绑定属性设置为默认值，即null，否则默认情况下不会选择该选项：
model = { product: null };
With null，我注意到 HTML 是
<option value="null">Select a product</option>
因此，您可能更喜欢使用空字符串''代替null:
[value]="product === defaultStr ? '' : product"
model = { product: '' };
那么 HTML 是
<option value="">Select a product</option>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
