2

我在 Angular 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/' ;
  }
}

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

4

2 回答 2

1

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

我所做的是像这样破解组件（上面的链接）：

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

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

于 2018-05-29T09:54:25.623 回答
0

我使用其他提示（源文件没有变化）。在基本方法中，过滤器将搜索具有指定名称的字段，在您的案例中，字段名称为“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";**
  }
}
于 2019-05-03T09:37:51.413 回答