如何在 ng-2 smart table 中过滤自定义数据类型 (link)

Question

我在 angular 5 项目的 ng2 smart table 的列中使用过滤器。以下代码运行正常。

columns: 
  service_start_date: {
    title: "DOS",
    filter: true,
    sort: true
  },

但是，当单元格是 link 类型的自定义组件时，这是行不通的。我尝试使用 filterFunction() 自定义过滤器。那也没用。

columns: {
  id: {
    title: "Enc #",
    type: "custom",
    renderComponent: LinkRenderComponent,
    filter: true,
    sort: true,
    filterFunction(cell?: any, search?: string): boolean {          
      if (cell === search || search === '') {
        return true;
      } else {
        return false;
      }          
    }
  },

这是我的 LinkRenderComponent 的 ts 文件。

export class LinkRenderComponent implements ViewCell, OnInit {

constructor(
    private router: Router
  ) { }
renderValue: string;
renderText: string;
hrefValue : string;

@Input() value: string | number;
@Input() rowData: any;

ngOnInit() {
  this.renderValue = this.rowData.encounter_procedure_id;
  this.renderText = this.rowData.encounter_id;
  this.hrefValue = '/home/ar-report/' ;
  }
}

我知道我可能必须让它在这个文件中工作。我在这个文件的什么地方让它工作？如何将行 header 的文本过滤器中的值传递给该文件？这似乎配置为将单元格中的值和作为行的值集作为输入。

Answer 1

不，它不适用于任何自定义属性（即不是基本的）。这里有一个错误：https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-smart-table/lib/data-source/local/local.filter.ts#L11 将“”作为单元格值提供给任何非基本属性.

的 filterFunction

我所做的就是像这样破解组件（link 以上）：

return data.filter(function (el) {
    //var value = typeof el[field] === 'undefined' || el[field] === null ? '' : el[field];
    return filter.call(null, el, search);
});

并将整个元素传递给过滤器。然后，我在 filterFunction 中拥有该项目的全部内容。对我来说效果很好。

Answer 2

我使用其他提示（源文件没有变化）。在基本方法中，过滤器将搜索具有指定名称的字段，在您的案例字段中，名称为 "id"。因此，您可以简单地在包含搜索内容的行中创建另一个文本字段 "idFilter" 并删除您的自定义过滤器功能：

 columns: {
  **idFilter**: {
    title: "Enc #",
    type: "custom",
    renderComponent: LinkRenderComponent,
    filter: true,
    sort: true
    }
  },

在组件 ngOnInit 中填写字段：

export class LinkRenderComponent implements ViewCell, OnInit {

ngOnInit() {
  this.renderValue = this.rowData.encounter_procedure_id;
  this.renderText = this.rowData.encounter_id;
  this.hrefValue = '/home/ar-report/' ;

  **this.idFilter = "you search content";**
  }
}

如何在 ng-2 smart table 中过滤自定义数据类型 (link)

how to filter custom data type (link) in ng-2 smart table

angular

ng2-smart-table