角度2 ng-テンプレート式を使用して選択値を設定する方法を選択します。

Question

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