我想设置一个< select>使用默认<选项>使用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>
模型：
products: string[] = [
'Foo','Bar'
];
现在发生的事情是我的选择是绑定到模型，它是：
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>
我不认为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'
];
由于您使用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>
