在两个<select>中默认Angular2 <option>

我想用默认的<option>使用HTML来设置<select> ，并用双向绑定到我的模型填充<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'
];

Plunker

由于您使用NgModel来绑定选定的值，因此您必须首先将绑定属性设置为默认值，该值为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>

---

我已经这样做了，它适用于我：

<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>

---

实际上，您可以创建Directive来追加默认选项并处理双向绑定：

import {Directive, ElementRef, Input, OnInit, Output, EventEmitter, HostListener} from 'angular2/core';

/**
 * <select [ngSelect]="'select number...'" [(ngSelectModel)]="model" >
 *    <option *ngFor="#item of ['1', '2', '3']" [value]="item">{{item}}</option>
 * </select>
 */
@Directive({
    selector: '[ngSelect]'
})
export class DefaultOption implements OnInit
{
    private _el:HTMLSelectElement;

    @Input('ngSelect')
    private defaultText:string;

    @Output()
    private ngSelectModelChange:EventEmitter = new EventEmitter();

    private _ngSelectModel:any;

    constructor(el:ElementRef)
    {
        this._el = el.nativeElement;
    }

    @Input()
    public get ngSelectModel():any
    {
        return this._ngSelectModel;
    }

    public set ngSelectModel(value:any)
    {
        this._ngSelectModel = value;
        if (this.ngSelectModel !== undefined)
        {
            this._el.value = this.ngSelectModel;
        }
        else
        {
            this._el.value = '';
        }
    }

    protected ngOnInit():any
    {
        var element:HTMLOptionElement = document.createElement('option');
        element.text = this.defaultText;
        element.value = '';
        this._el.insertBefore(element, this._el.firstChild);

        //delayed execution
        setTimeout(()=>
        {
            if (this.ngSelectModel !== undefined)
            {
                this._el.value = this.ngSelectModel;
            }
            else
            {
                this._el.value = '';
            }
        }, 0);
    }

    @HostListener('change', ['$event.target.value'])
    private onInput(value):void
    {
        if(value !== '')
        {
            this.ngSelectModelChange.emit(value);
        }
        else
        {
            this.ngSelectModelChange.emit(undefined);
        }
    }
}

链接地址: http://www.djcxy.com/p/88081.html

上一篇: Defaulting an Angular2 <option> in a <select> with two

下一篇: Selecting a default value for dependant dropdowns in AngularJS