angular 2 ng - 選擇如何使用模板表達式設置選定值

Question

angular 2 ng - 選擇如何使用模板設置選定值。比如這樣的事情，

<ng-select 
      [options]="[{label : "first", value : "1"}, {label : "second", value : "2"}]" 
      **[value]="'1'"** 
      [multiple]="false"> 
</ng-select> 

我正在使用angular2-select npm包。我想用Input屬性來完成任務，而不是ngModel。

Answer 1

使用ngModel屬性，

可以使用

<select [(ngModel)]="name" name="Select name" class="ui fluid search selection dropdown"> 
     <option *ngFor="#n of names" [attr.value]="n">{{n}}</option> 
</select> 

DEMO

Answer 2

我用自定義組件包裝NG-選擇組件得到了解決這個問題。

@Component({ 
    selector: 'ice-select', 
    templateUrl: './ice-select.component.html', 
    providers: [ 
    { 
     provide: NG_VALUE_ACCESSOR, 
     useExisting: forwardRef(() => IceSelectComponent), 
     multi: true 
    } 
    ] 
}) 

併爲組件中的'ControlValueAccessor'實現了接口方法。

export class IceSelectComponent implements ControlValueAccessor, OnInit { 

     public writeValue(value: any) { 
     this.selectedValue = value; 
     } 

     public registerOnChange(fn) { 
     this.propagateChange = fn; 
     } 

     public registerOnTouched(fn){ 
     this.propagateTouched = fn; 
     } 
} 

HTML模板，

<ng-select 
      [options]="options" 
      [multiple]="false" 
      [noFilter]="100" 
      [allowClear]="true" 
      [notFoundMsg]= "'No records found'" 
      placeholder="Select" 
      (selected)="onSelect($event)" 
      (deselected)="onRemove($event)" 
      [(ngModel)]="selectedValue" 
></ng-select>