Question

我正在尝试设置一个在使用自定义商店时使用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>

为什么没有显示所选值？

我添加了一个plunker示例https://plnkr.co/edit/5VtwIBw6ZMasEmkcxfax?p=options

DevExpress dxSelectBox with Custom Store＆amp; Angular 6

0 个答案: