ng-selectを使用してangualr2ドロップダウンでデフォルトで選択された値を設定する方法は？

Question

私はfollwingコードを使用して、複数の値のangular2ドロップダウンを使用しています

<ng-select [options]="dropDownSKUNumber" #SKUNumberDrp multiple="true" placeholder="Select SKU Number" [allowClear]="true"></ng-select> 

このコードは、複数の値を保存する時には私のために正常に動作しています。 しかし、ビューモードでは、ドロップダウンで選択されたモードでデフォルトでその値が必要ですが、私はこれを行うことができません。

どうすれば解決できますか？上記のコードを使用します。

Answer 1

オプションを使用しているので、this ng2-selectを使用している必要があります。 この場合、ngModelにバインドし、スクリプトのinitでその値を更新する必要があります。

Ie.

あなたは以下のようにコンポーネントで選択した値を配列としてoptionsとngModleを使用することができます。 HTML

<ng-select 
    [multiple]="true" 
    [options]="myOptions" 
    [(ngModel)]="mySelectValue"> 
</ng-select> 

TS

export class App implements OnInit { 

    myOptions: Array<any>; 
    mySelectValue: Array<string>; // Array of strings for multi select, string for single select. 

    ngOnInit() { 
     this.myOptions = [ 
      {value: 'a', label: 'Alpha'}, 
      {value: 'b', label: 'Beta'}, 
      {value: 'c', label: 'Gamma'}, 
     ]; 
     this.mySelectValue = ['b', 'c']; 
    } 
} 

Answer 2

angular2 selectによると、あなたは初期値を設定するngModelを使用することができます。

//Component 
public dropDownSKUNumber : any[] = [ 
    { value: 1, label : 1 }, 
    { value: 2, label : 2 }, 
    { value: 3, label : 3 } 
]; 
public selectedValue: string[] = [ '2', '3' ]; 

//HTML 
<ng-select [options]="dropDownSKUNumber" #SKUNumberDrp multiple="true" placeholder="Select SKU Number" [(ngModel)]="selectedValue" [allowClear]="true"></ng-select>