4

Basically the ng2-select module allows me to add a 1 dimension array to its items:

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

which looks like : ng-select dropdown

but what I want is having this kind of items set:

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

If I set the value of [items] to this value I get [object],[object] on the value attribute of the element and an empty dropdown. How can I make this possible?

UPDATE

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

Items:

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' } },
];

Render 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>
4

2 回答 2

0

尝试这样的事情

 <select>
  <option *ngFor="let item of items" [value]="item.value">
    {{item.label}}
  </option>
</select>
于 2018-10-03T09:33:01.533 回答
0

如果您使用的是 ng2-select 模块，请执行此操作。

模板

  <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);
  }
于 2018-10-03T10:08:51.417 回答