Question

我正在使用Angular 7的Kendo UI，并且大部分时间都可以进行过滤，但是我无法弄清一件事。我有一些字段通过管道传递，以使UI更加用户友好。例如，我的对象中有一个代码指定一个软件。当它显示在网格中时，它将代码转换为软件的全名，以使用户更轻松。

此列上的过滤正在运行...但是它是根据基础代码而不是UI显示值进行过滤。因此，用户看到了“ Keynote Manager”，并试图将“ Ke”放入过滤器中，但找不到任何东西，因为它正在寻找作为基础代码的“ KM”。

是否有一种方法可以基于UI显示/管道的值而不是管道之前的基础值对其进行过滤？

修改

不确定我的特定代码是否真的相关，因为这是一个更普遍的问题，但这是我要求的代码：

网格定义

<kendo-grid [data]="GridData" style="height: 100%" (detailExpand)="GetSessions($event.dataItem)"
                  [reorderable]="true" [resizable]="true"
                  [sortable]="{allowUnsort: true, mode: 'single'}" [sort]="State.sort"
                  [filterable]="true"
                  [filter]="State.filter"
                  (dataStateChange)="dataStateChange($event)"
                  [loading]="IsLoading">
        <ng-template kendoGridNoRecordsTemplate><div class="values" *ngIf="!IsLoading">No Licenses to Display</div></ng-template>
        <kendo-grid-column title="#" field="Seats" width="60" [filterable]="false"
                           [headerStyle]="{'text-align': 'center'}"
                           [style]="{'text-align': 'center'}"></kendo-grid-column>
        <kendo-grid-column title="Software" field="Software">
          <ng-template kendoGridCellTemplate let-license>{{ license.Software | softwareType }}</ng-template>
        </kendo-grid-column>
        <kendo-grid-column title="Portable" field="IsPortable" filter="boolean">
          <ng-template kendoGridCellTemplate let-license>{{ license.IsPortable | titlecase }}</ng-template>
        </kendo-grid-column>
        <kendo-grid-column title="Features" field="Features">
          <ng-template kendoGridCellTemplate let-license>{{ license.Features | features | titlecase }}</ng-template>
        </kendo-grid-column>
        <kendo-grid-column title="Expiry" field="Expiry" filter="date" format="d"></kendo-grid-column>
        <kendo-grid-column title="Key" field="ID">
          <ng-template kendoGridCellTemplate let-license>{{ license.ID }}</ng-template>
        </kendo-grid-column>            
      </kendo-grid>

组件代码

    import {Component, OnInit} from '@angular/core';
import {License} from '../Classes/license';
import {LicenseService} from '../license.service';
import {StandaloneActivation} from '../Classes/StandaloneActivation';
import {LicenseUsageBase} from '../Classes/LicenseUsageBase';
import {UserService} from '../user.service';
import {Session} from '../Classes/Session';
import {State, process} from '@progress/kendo-data-query';
import {DataStateChangeEvent, GridDataResult} from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-licenses',
  templateUrl: './licenses.component.html',
  styleUrls: ['./licenses.component.css']
})
export class LicensesComponent implements OnInit {
  // TODO: Allow release of multiple licenses at a time
  Licenses: License[];

  GridData: GridDataResult;

  State: State = {
    skip: 0,
    sort: [{field: 'Software', dir: 'asc'}],
    filter: {
      logic: 'and',
      filters: []
    }
  };
  IsLoading = true;

  constructor(private licenseService: LicenseService,
              private userService: UserService) {
  }

  ngOnInit() {
    this.GetLicenses();
  }

  GetLicenses(): void {
    this.licenseService.GetLicenses().subscribe(licenses => {
      this.Licenses = licenses;
      this.GridData = process(this.Licenses, this.State);
      this.IsLoading = false;
    });
  }   

  public dataStateChange(state: DataStateChangeEvent): void {
    this.State = state;
    this.GridData = process(this.Licenses, this.State);
  }
}

修改

根据下面的建议，我最终改变了我的基本级别转换器，以在类上设置新属性，并使用原始管道基于该属性对其进行了过滤：

private ConvertBaseToLicense(baseObject: any): License {
  const jsonConvert: JsonConvert = new JsonConvert();
  jsonConvert.operationMode = Constants.ConverterMode;

  const license = jsonConvert.deserializeObject<License>(baseObject, License);
  const SwPipe = new SoftwareTypePipe();
  license.UIName = SwPipe.transform(license.Software);
  return license;
}

Answer 1

过滤将违反网格的数据源，但是我认为有两种方法可以实现所需的内容，尽管它们都不是您想要的。

最简单的方法是修改GetLicenses()，以在数据中添加一个额外的列，该列包含“ Keynote Manager”和其他值（无论是在源中还是在返回数据时），然后绑定到此列

另一种方法是在网格中添加一个custom filter，您可以在其中保留键值对代码（KM）和友好的描述（Keynote Manager），并允许用户从下拉菜单中进行选择。

Kendo UI值的角度网格过滤器

1 个答案: