mặc định một Angular2 <option> trong một <select> với hai chiều ràng buộc

Question

tôi muốn thiết lập một <select> với một mặc định <option> sử dụng HTML, và Populating phần còn lại của <select> với hai cách ràng buộc để mô hình của tôi.

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> 

mẫu:

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

gì đang xảy ra hiện nay là lựa chọn của tôi là liên kết với các mô hình, đó là:

model: Entry = new Entry(); 

Vì vậy, không có mặc định giá trị trong thuộc tính product, do đó, <select> liên kết với không có gì. Ý tôi là, điều này đang hoạt động như mong đợi.

Mặc dù tôi đang cố gắng tìm ra cách để có giá trị mặc định để hiển thị trong <select> và tôi muốn làm điều đó mà không cần mã hóa giá trị giao diện người dùng trong mô hình của mình và đặt mặc định trong trường hợp mới mô hình của tôi. Angular 2 có cách để giải quyết vấn đề này không?

Edit:

Kết quả HTML sẽ giống như thế:

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

Answer 1

Tôi không nghĩ rằng góc có một cách để đối phó với điều này.Bạn sẽ phải làm một số công việc:

<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

Vì bạn đang sử dụng NgModel để ràng buộc giá trị được lựa chọn, bạn phải thiết lập các thuộc tính vào giá trị mặc định ràng buộc ban đầu, là null, nếu không tùy chọn đó sẽ không được chọn theo mặc định:

model = { product: null }; 

---

Với null, tôi nhận thấy rằng HTML là

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

Vì vậy, bạn có thể thích sử dụng một chuỗi rỗng '' thay vì null:

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

model = { product: '' }; 

Sau đó, HTML là

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

Answer 2

Trong thực tế, bạn có thể tạo Directive để thêm tùy chọn mặc định và xử lý hai chiều ràng buộc:

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