使用 DevExtreme 在 Angular 组件内的下拉列表中按字符串搜索时出现问题

Question

问题描述：

我遇到一个问题，即在 Angular 应用程序中使用 DevExtreme 的 dx-data-grid 和 dxo-lookup 组件实现的下拉列表中的搜索功能无法按预期工作。尽管将 searchEnabled 设置为 true，但在下拉列表中输入特定字符串不会过滤或搜索列表项。

html 组件

<dxi-column dataField="Person1" caption="Person 1" [allowEditing]="true">
  <dxo-lookup [dataSource]="peopleDataSource"
              valueExpr="Login"
              displayExpr="Name"
              searchEnabled="true"></dxo-lookup>
</dxi-column>

TypeScript 组件：

在组件中，'peopleDataSource' 设置为 'CustomStore'，具有异步检索数据的加载函数：

  constructor(
    this.peopleDataSource = new CustomStore({
     key: 'Login',
     load: () => this.wrapPromise(this.dataService.getPeopleDataSource()),
     byKey: (key) => this.wrapPromise(this.dataService.getPersonByKey(key))
});
}

private wrapPromise(observable: Observable<any>): Promise<any> {
  return new Promise((resolve, reject) => {
    const subscription = observable.subscribe({
      next: resolve,
      error: reject
    });
    this.subscriptions.push(subscription);
  });
}

TypeScript 服务：

服务中的 'getPeopleDataSource' 方法获取人员列表：

  getPeopleDataSource(): Observable<any[]> {
    return this.http.get<any[]>(`${this.apiUrl}/ADApi/GetPeople`, { 
  withCredentials: true });
  }


  getPersonByKey(key: string): Observable<any> {
    // Replace the URL with the correct endpoint to fetch a specific person by their login
    return this.http.get<any>(`${this.apiUrl}/ADApi/GetPersonByKey/${key}`, { withCredentials: true });
  }

问题：

下拉列表正确填充数据，但在下拉列表中键入不会启动搜索或根据键入的字符过滤列表。

问题：

• 是否需要额外的配置才能在 DevExtreme 中的 dxo-lookup 组件中启用正确的搜索功能？

• 是否可能对 searchEnabled 的工作原理存在误解，或者数据在下拉列表中加载或呈现的方式是否存在潜在问题？ 任何有关在此设置中启用搜索功能的建议或见解将不胜感激。

Answer 1

每当您在下拉列表中搜索时，都会在您的 peopleDataSource 中调用 load 方法。您可以使用 load 方法中的 loadOptions 来实现搜索逻辑。这样您就可以在后端过滤您的数据。

像这样：

load: (loadOptions) => this.wrapPromise(this.dataService.getPeopleDataSource(loadOptions.searchExpr, loadOptions.searchValue))

自定义存储文档的链接：https://js.devexpress.com/Angular/Documentation/ApiReference/Data_Layer/CustomStore/

loadOptions 文档链接： https://js.devexpress.com/Angular/Documentation/ApiReference/Data_Layer/CustomStore/LoadOptions/