Question

我在角度5项目的ng2智能表的cols中使用过滤器。以下代码工作正常。

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

但是，当单元格是链接类型的自定义组件时，这不起作用。我尝试了一个带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/' ;
  }
}

我知道我可能必须让它在这个文件中工作。我在这个文件中的位置使它工作？如何将行标题文本过滤器中的值传递给此文件？这似乎配置为将单元格中的值和作为行的值集合作为输入。

Answer 1

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

我所做的就是攻击组件（上面的链接），如下所示：

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智能表中过滤自定义数据类型（链接）

2 个答案: