Setzen einer Angular2 & lt; Option & gt; in einem & lt; select & gt; mit Zwei-Wege-Bindung

Würde ich mag, um das setup eine <select> mit einem Standard - <option> mit HTML, und füllen den rest der <select> mit zwei-Wege-Bindung zu meinem Modell.

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>

Modell:

products: string[] = [
    'Foo',
    'Bar'
];

Was da jetzt passiert, ist meine select ist die Bindung an das Modell, die:

model: Entry = new Entry();

So, es gibt keine default-Wert in der product Eigenschaft, so ist die <select> bindet sich an nichts. Ich meine, das ist eine Arbeit, wie erwartet.

Ich versuche, herauszufinden, wie man einen default-Wert zu zeigen, bis in der <select> aber, und ich möchte zu tun, ohne harte Codierung ein UI-Wert in meinem Modell und säumigen, die in einer neuen Instanz von meinem Modell. Tut Winkel-2 haben eine Möglichkeit, damit umzugehen?

Edit:

Das Ergebnis der HTML sollte so Aussehen:

<select>
  <option value>Select a product</option>
  <option value="foo">Foo</option>
  <option value="bar">Bar</option>
</select>

InformationsquelleAutor der Frage mariocatch | 2016-04-14

angular

Ich glaube nicht, dass Angular hat eine Möglichkeit, damit umzugehen. Sie haben zu tun, einige arbeiten:

<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

Da Sie über NgModel binden Sie den ausgewählten Wert, müssen Sie legen Sie die gebundene Eigenschaft auf den Standardwert zunächst, die nullandernfalls wird die option nicht standardmäßig aktiviert:

model = { product: null };

Mit null bemerkte ich, dass der HTML-Code wird

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

So, können Sie es vorziehen, verwenden Sie eine leere Zeichenfolge '' statt null:

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

model = { product: '' };

Dann der HTML-Code wird

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

InformationsquelleAutor der Antwort Mark Rajcok

In der Tat, Sie konnte erstellen Directive zum Anhängen Standard-option und Griff zwei-Wege-Bindung:

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);
        }
    }
}

InformationsquelleAutor der Antwort kemsky

2

Auf beta 14 (siehe: Angula2-beta.14 Changlog), Winkel fügt die Unterstützung für das Objekt wählen tags:
```
<select class="form-control" required [(ngModel)]="model.product">
  <option *ngFor="#prod of products" 
   [ngValue]="prod">
     {{prod.name}}
  </option>
</select>
```
statt [value] verwenden, können Sie [ngValue] zum binden eines Objekts an ngModel im select-tag.

Sehen Sie ein Beispiel auf Plunker mit default-Wert.

Dem Attribut selected nicht funktioniert, bin ich versucht zu reparieren, dies auf mein Projekt mit einigen workaround!

Hoffe, die nützlich sein können.

InformationsquelleAutor der Antwort Maike Meneguetti
0

Ich hatte genau das gleiche Problem, wir können nur binden Sie die ngModel auf den Wert :
```
<option *ngFor="#product of products" [value]="model.product">{{product}}</option>
```
InformationsquelleAutor der Antwort Negin
0

Näherst du dich in richtige Richtung. Eine Sache, die Bedürfnisse zu berücksichtigen ist, dass die null-Wert-Modell wird im Vergleich mit einem leeren string als Wert der Standard-option.
Also, wenn Sie vergleichen Sie und setzen Sie null-Wert des Standard-text anzuzeigen, dann werde es funktionieren.
Ich habe wie oben festgelegt, und es ist für mich arbeiten !
```
<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>
```
InformationsquelleAutor der Antwort Pranav Labhe

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.