title: DevExpress dxSelectBox with Custom Store & Angular 6
body: <p>I am trying to setup a to use the DevExpress dxSelectBox while using a custom store. I have created a custom data source which is working correctly to load the list of items but not the <strong>byKey</strong>.</p>
  
  <p>I have build a very simple example here with a fake data source but it is not showing the selected value</p>
  
  <p>home.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import DataSource from 'devextreme/data/data_source';
  import { DataService } from '../../services/data.service';
  @Component({
     selector: 'home',
     templateUrl: './home.component.html'
  })
  export class HomeComponent implements OnInit {
  
    items = [
      { id: 123, name: 'John' },
      { id: 321, name: 'Bob' },
      { id: 42, name: 'Joe' },
      { id: 89, name: 'Suzy' },
      { id: 10, name: 'Jenny' },
    ];
  
    item = {
      person: { id: 123, name: 'John' }
    };
  
    editorOptions = {
      displayExpr: 'name',
      valueExpr: 'id',
      dataSource: null
    };
  
   constructor(
      private data: DataService
    ) {
      const vm = this;
      this.editorOptions.dataSource = new DataSource({
        load: function (loadOptions) {
          console.log('Loading');
          const promise1 = new Promise(function (resolve, reject) {
            setTimeout(function () {
            console.log('resolving', vm.items);
             resolve(
               {
                 data: vm.items
               }
             );
            }, 3000);
          });
  
          return promise1;
  
  
        }
        byKey: function (key) {
  
         console.log('Getting Person', key);
          const promise1 = new Promise(function (resolve, reject) {
           setTimeout(function () {
             console.log('Getting Person', key);
             resolve({ id: 123, name: 'John' });
           }, 3000);
          });
  
         return promise1;
       }
     });
  
   }
  
   ngOnInit() {
    }
  }
  </code></pre>
  
  <p>The HTML for this component is fairly simple:</p>
  
  <pre><code>&lt;div class="container" *ngIf="item"&gt;
    &lt;dx-form id="form" [(formData)]="item"&gt;
      &lt;dxi-item dataField="person" editorType="dxSelectBox" 
  [editorOptions]="editorOptions"&gt;&lt;/dxi-item&gt;
    &lt;/dx-form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Why is this not showing the selected value?</p>
  
  <p>I have added a plunker example <a href="https://plnkr.co/edit/5VtwIBw6ZMasEmkcxfax?p=options" rel="nofollow noreferrer">https://plnkr.co/edit/5VtwIBw6ZMasEmkcxfax?p=options</a></p>