Question

我想设置一个＆lt; select＆gt;使用默认＆lt;选项＆gt;使用HTML，并填充＆lt; select＆gt;的其余部分用双向绑定到我的模型。 HTML：＆lt; select class =“form-control”required [（ngModel）] = “model.product” ngControl = “产品” ＆GT; ＆lt; option value =“”＆gt;选择产品＆lt; / option＆gt; ＆lt; option * ngFor =“＃products of products”[value] =“product”＆gt; {{product}}＆lt; / option＆gt; ＆LT; /选择＆GT; 模型：产品：string [] = [ “富”， '酒吧' ]。现在发生的是我的select绑定到模型，它是： model：Entry = new Entry（）; 因此，产品属性中没有默认值，因此＆lt; select＆gt;什么都没有。我的意思是，这是按预期工作的。我正试图弄清楚如何在＆lt; select＆gt;中显示默认值虽然如此，我想在我的模型中没有对UI值进行硬编码并在我的模型的新实例中进行默认操作时这样做。 Angular 2有办法解决这个问题吗？编辑：结果HTML应如下所示：＆LT;选择＆GT; ＆lt; option value＆gt;选择产品＆lt; / option＆gt; ＆lt; option value =“foo”＆gt; Foo＆lt; / option＆gt; ＆lt; option value =“bar”＆gt; Bar＆lt; / option＆gt; ＆LT; /选择＆GT;

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

实际上，您可以创建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);
        }
    }
}

Answer 3

在beta 14（参见：Angula2-beta.14 Changlog）上，angular在select标签中添加了对Object的支持：

<select class="form-control" required [(ngModel)]="model.product">
  <option *ngFor="#prod of products" 
   [ngValue]="prod">
     {{prod.name}}
  </option>
</select>

而不是[value]，您可以使用[ngValue]将对象绑定到select标记中的ngModel。

您可以在Plunker上看到一个默认值的示例。

属性selected无法正常工作，我正试图通过一些解决方法在我的项目上解决这个问题！

希望这有用。

Answer 4

我确实遇到了同样的问题，我们可以将ngModel绑定到值：

Answer 5

你正朝着正确的方向前进。需要考虑的一件事是将模型的空值与默认选项的空字符串值进行比较。因此，如果您比较并设置默认显示文本的空值，那么它将正常工作。我已按上述方式设置，并且它为我工作！

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

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

5 个答案: