DevExpress: Angular DxTagBox с разбивкой на страницы не предварительно заполняет значения

Я ломал голову с последних стольких дней для решения проблемы, но не смог ее найти. Ниже приводится описание проблемы, связанной с полем тега 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();
}

Здесь я хочу принудительно добавить значение массива «регионы» в поле тегов, хотя эти значения не поступают из API, который используется для заполнения элементов поля тегов. Я даже не могу ввести пользовательские значения в поле тегов пользовательского интерфейса, как показано в документации devexpress.

Есть ли способ добиться этого или я просто трачу свое время, и я должен попробовать какой-то другой подход?

Пожалуйста, помогите мне. Спасибо


angular devexpress devextreme devextreme-angular
person Sarim Javaid Khan    schedule 29.05.2019    source источник
comment
this.regions никогда не добавляется к DataSource, как вы ожидаете, что он появится?   -  person briosheje    schedule 30.05.2019
comment
@briosheje Это то, что мне нужно, не добавляя эти записи в источник данных. Зачем тогда [acceptCustomValue]=true?   -  person Sarim Javaid Khan    schedule 31.05.2019
comment
Из документов: Указывает, позволяет ли виджет пользователю вводить пользовательское значение. Требуется реализация обработчика onCustomItemCreating. . Независимо от того, реализуете ли вы метод onCustomItemCreating, вы путаете значение свойства: оно позволяет ПОЛЬЗОВАТЕЛЮ добавлять значения, которых нет в источнике данных. Это означает, что каждый раз, когда пользователь вводит пользовательское значение, оно может быть добавлено в поле тега. Вам просто нужно нажать this.regions в существующий источник данных (в result), вот и все, для меня это не имеет ничего общего с этим свойством.   -  person briosheje    schedule 31.05.2019
comment
@briosheje, и как я могу передать этот элемент в существующий источник данных, поскольку это источник данных с разбивкой на страницы? Есть идеи?   -  person Sarim Javaid Khan    schedule 11.06.2019
comment
Да, вы можете легко добавить это в result при объявлении пользовательского хранилища (например, с помощью concat). Не могли бы вы поделиться структурой result? Конечно, это массив объектов, но есть ли у объекта сигнатура?   -  person briosheje    schedule 12.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел решение. Я добавил новые значения в объект «результат», который возвращает метод «загрузить». Во время загрузки дополнительных данных я удаляю уже добавленные элементы из массива результатов, чтобы они не повторялись.

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;
    }
person Sarim Javaid Khan    schedule 18.06.2019