web-dev-qa-db-ja.com

angular6のng-selectでデフォルト値を設定するにはどうすればよいですか？

私はangular6 _multi-select_を使用していますが、これはngOnInitのangularサービスからのオブジェクトの配列に含まれる項目のリストを持ち、_multi-select_に渡されます。

_this.sensorTypes = [
  { label : "Power", value : "P"},
  { label : "Current", value : "C"},
  { label : "Voltage", value : "V"}
]
_

フォームが読み込まれるときに_multi-select_にデフォルトで2つの値を設定します。このため、_multi-select_にngModelをバインドし、その変数にngOnInitに値を設定しています

_this.selectedAttributes = [
  {label : "Current", value : "C"},
  {label : "Voltage", value : "V"}
]
_

私のcomponent.htmlで私はこのように_multi-select_を作成しています：

_<div class="form-group row">
  <div class="col-sm-10">
    <ng-select 
       [ngClass]="'ng-select'" 
       [(ngModel)]="selectedAttributes" 
       [ngModelOptions]="{standalone: true}" 
       [options]="sensorTypes"
       [multiple]="true">
    </ng-select>
  </div>
</div>
_

ただし、値は複数選択のデフォルトでは設定されていません。

angulartypescriptangular6multi-selectangular-ngselect
5
Fahad Subzwari

[items]の代わりに[options]入力バインディングを使用する必要があります

<ng-select 
  [items]="sensorTypes"
  bindLabel="label"                 
  [multiple]="true"
  placeholder="Select"
  [(ngModel)]="selectedAttributes">
</ng-select>

そして、コンポーネントのmodule.tsにNgSelectModuleをインポートします。また、FormsModuleをインポートしていない場合は、ngModelとの双方向バインディングで機能するようにインポートする必要があるため、インポートする必要があります。

import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
.
.
@NgModule({
  imports: [
    FormsModule,
    NgSelectModule,
. 
.
.
2
wentjun

bindlabelとbindvalueの両方を使用している場合は、最初に選択した値のインデックスを検索しますt e

var index= this.sensorTypes.findIndex(x => x.ID ==something); 
//this will set value
this.selectedAttributes= this.sensorTypes[index].ID;
1
Manan bhavsar

値はデフォルトで複数選択で設定されていません

このため、ngOnInit()のthis.sensorTypes[0]のngModelにng-selectを割り当てます

ngOnInit() {
  this.selectedAttributes = this.sensorTypes[0]
}

これにより、最初の属性がデフォルトとして取得されます。

0
ganesh045