DevExpress dxSelectBox с пользовательским магазином и Angular 6 - PullRequest
Новая
       13

DevExpress dxSelectBox с пользовательским магазином и Angular 6

0 голосов
/ 25 мая 2018

Я пытаюсь настроить использование DevExpress dxSelectBox при использовании пользовательского магазина.Я создал собственный источник данных, который работает правильно, чтобы загрузить список элементов, но не byKey .

. Я создал очень простой пример с поддельным источником данных, но этоне отображается выбранное значение

home.component.ts 

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() {
  }
}

HTML-код этого компонента довольно прост: 

<div class="container" *ngIf="item">
  <dx-form id="form" [(formData)]="item">
    <dxi-item dataField="person" editorType="dxSelectBox" 
[editorOptions]="editorOptions"></dxi-item>
  </dx-form>
</div>

Почему это не показывает выбранноезначение?

Я добавил пример плунжера https://plnkr.co/edit/5VtwIBw6ZMasEmkcxfax?p=options

...