如何过滤NG-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/' ;
  }
}

我知道我可能必须在此文件中使用它。我在此文件中在哪里工作?如何将其传递到该文件中的"行"文本过滤器中的值?这似乎被配置为输入单元格中的值,而值集则是行。

no,它不适用于任何自定义属性(即不是基本属性(。这里有一个错误:https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-src/ng2-smart-table/lib/data-source/local/local/local.filter.filter.ts#l11馈送"作为任何非基础特性的过滤器功能的单元格值。

我所做的就是这样黑客入侵组件(上面的链接(:

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

并将整个元素传递到过滤器。然后,我在过滤器功能中具有该项目的全部内容。对我来说很好。

我使用其他提示(源文件中没有更改(。在基本方法中,过滤器将在您的案例字段中搜索带有名称" ID"的字段。因此,您可以简单地将另一个文本字段" IDFILTER"加入使用搜索内容,然后删除自定义过滤器功能:

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

组件中的ngoninit填充了IT字段:

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";**
  }
}

最新更新