DevExpress：Angular 分页 DxTagBox 未预填充值

Question

最近这么多天一直在摸不着头脑，想解决一个问题，但一直找不到。以下是与dx标签框相关的问题描述。 https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxTagBox/

问题描述：我需要向 dxtagbox 添加自定义值，这些值还不是 dxtagbox 列表的成员。以下是我的 html 和实现此目的的 ts 代码。我尝试了很多东西，但到目前为止都没有成功。

common.component.html

<div class="row">
<div class="form-group col-md-12 mt-2">
  <label>Region</label>
  <dx-tag-box id="region-lookup" [dataSource]="regionListLookup" class="time-box" [showClearButton]="true"
    style="height: auto !important;" [acceptCustomValue]="true"
    [applyValueMode]="'useButtons'" (onKeyUp)="onEmptyingList($event)" (onValueChanged)="onClearingList($event)" [showSelectionControls]=true
    [searchEnabled]="true" [value]="regions"
    displayExpr="Value" valueExpr="Key">
  </dx-tag-box>
</div>

common.component.ts

regions = [];
populateRegionslookup() {
 this.regionListLookup = {
  paginate: true,
  store: new CustomStore({
    key: 'Key',
    load: async (loadOptions) => {
      console.log('this: ', this);
      console.log('loadOptions: ', loadOptions);
      const paginatedData = { Text: loadOptions.searchValue, PageNo: loadOptions.skip, PageSize: loadOptions.take};
      const result = await this.reportsService.getRegionsMetaData(paginatedData)
        .toPromise();
      console.log('this.reportsService.getRegionsMetaData("{' + loadOptions.searchValue + ' })', result);
      result.map((resultItem) => {
        resultItem.Value = `${resultItem.Key} - ${resultItem.Value}`;
        return resultItem;
      });
      return result;
    },
    byKey: (key) => {
      console.log('from byKey: ', key);
      //code to return from api by key
    }
  })
 };
}
onEmptyingList(event) {
 if (event.event.key == 'Backspace' || event.event.key == 'Delete') {
   //For Tagbox
   if(event.element.id == 'region-lookup') {
     this.taggedRegions = event.value;
     this.timeReportsSearchModel.Region = this.taggedRegions;
     this.missingOfficeTagBoxComponent && this.missingOfficeTagBoxComponent.instance.getDataSource().reload();
   }
  }
}

onClearingList(event) {
 //For Tag Box
 if(event.element.id == 'region-lookup') {
   this.taggedRegions = event.value;
   this.timeReportsSearchModel.Region = this.taggedRegions;
   this.missingOfficeTagBoxComponent && this.missingOfficeTagBoxComponent.instance.getDataSource().reload();
  }
}

constructor(){
 this.regions = ["customValue1","customValue2","customValue3","customValue4"]
 this.populateRegionslookup();
}

在这里，我想强制将 "regions" 数组值添加到标签框，尽管这些值不是来自用于填充标签框项目的 api。如 devexpress 的文档所示，我什至无法在 ui 的标签框中输入自定义值。

有什么方法可以做到这一点，或者我只是在浪费时间，我应该尝试其他方法吗？

请帮帮我。谢谢

Answer 1

我找到了解决办法。我将新值添加到 "load" 方法返回的 "result" 对象。在加载更多数据时，我从结果数组中删除已经添加的成员，这样它们就不会重复。

load: async (loadOptions) => {
      console.log('this: ', this);
      console.log('loadOptions: ', loadOptions);
      const paginatedData = { Text: loadOptions.searchValue, PageNo: loadOptions.skip, PageSize: loadOptions.take};
      const result = await this.reportsService.getRegionsMetaData(paginatedData)
        .toPromise();
      console.log('this.reportsService.getRegionsMetaData("{' + loadOptions.searchValue + ' })', result);
      result.map((resultItem) => {
        resultItem.Value = `${resultItem.Key} - ${resultItem.Value}`;
        return resultItem;
      });
      this.addNewItemsToRegionLookup(result);
      return result;
    }

DevExpress：Angular 分页 DxTagBox 未预填充值

DevExpress: Angular Paginated DxTagBox not pre populating values

devexpress

devextreme

angular

devextreme-angular