Как добавить значение и метку в Angular 2 ng-select - PullRequest
Новая
       15

Как добавить значение и метку в Angular 2 ng-select

0 голосов
/ 03 октября 2018

В основном, модуль ng2-select позволяет мне добавить 1-мерный массив к его элементам: 

items = ['option 1','option 2','option 3'];

, который выглядит следующим образом: ng-select dropdown

но то, что я хочу, это установить такие элементы: 

items = [
        { value: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2' },
        { value: '3', label: 'Option 3' },
    ];

Если я установлю значение [items] на это значение, я получу [object], [object] в атрибуте value элемента ипустой выпадающий списокКак я могу сделать это возможным?

ОБНОВЛЕНИЕ
HTML: 

   <ng-select
    [items]="items" 
    bindLabel="nested.label"
    bindValue="nested.value">
   </ng-select>

Элементы: 

items = [
        { id: 1, nested: { value: '1', label: 'Option 1' } },
        { id: 2, nested: { value: '2', label: 'Option 2' } },
        { id: 3, nested: { value: '3', label: 'Option 3' } },
    ];

Визуализация HTML: 

    <ng-select _ngcontent-c2="" bindlabel="nested.label" bindvalue="nested.value" _nghost-c5="" ng-reflect-items="[object Object],[object Object">
<!--bindings={ "ng-reflect-ng-if": "true" }-->
<div _ngcontent-c5="" class="ui-select-container dropdown open" tabindex="0" ng-reflect-off-click-handler="function () { [native code] }"> <div _ngcontent-c5="" ng-reflect-ng-class="[object Object]">
</div>
<!--bindings={ "ng-reflect-ng-if": "true" }-->
<div _ngcontent-c5="" class="ui-select-match">
<span _ngcontent-c5="" class="btn btn-default btn-secondary form-control ui-select-toggle" style="outline: 0;" tabindex="-1">
<!--bindings={ "ng-reflect-ng-if": "true" }-->
<span _ngcontent-c5="" class="ui-select-placeholder text-muted"></span> <!--bindings={ "ng-reflect-ng-if": "false" }-->
<i _ngcontent-c5="" class="dropdown-toggle pull-right"></i>
<i _ngcontent-c5="" class="caret pull-right"></i>
<!--bindings={ "ng-reflect-ng-if": "false" }-->
</span>
</div>
<!--bindings={ "ng-reflect-ng-if": "false" }-->
<!--bindings={ "ng-reflect-ng-if": "false" }-->
<!--bindings={ "ng-reflect-ng-if": "false" }-->
</div> <!--bindings={ "ng-reflect-ng-if": "false" }-->
</ng-select>

Ответы [ 2 ]

0 голосов
/ 03 октября 2018

если вы используете модуль ng2-select, перейдите к этому.

template 

  <ng-select 
             [items]="items"             
             (selected)="selected($event)"></ng-select>

ts 

   items = [
            { id: '1', text: 'Option 1' },
            { id: '2', text: 'Option 2' },
            { id: '3', text: 'Option 3' },
        ];


  public selected(value:any):void {
    console.log('Selected value is: ', value);
  }
0 голосов
/ 03 октября 2018

Попробуйте что-то вроде этого 

 <select>
  <option *ngFor="let item of items" [value]="item.value">
    {{item.label}}
  </option>
</select>
...