保存过滤管道Angular2中的过滤数据答案

【问题标题】：Save filtered data from filter pipe Angular2保存过滤管道Angular2中的过滤数据
【发布时间】：2017-10-04 20:08:08
【问题描述】：

我的管道是：

@Pipe({
    name: "dataFilter"
})
export class DataFilterPipe implements PipeTransform {

    transform(array: any[], query: string): any {
        if (query) {
            return _.filter(array, row=>row.name.indexOf(query) > -1);
        }

        return array;
    }
}

我的html文件：

  <table class="table table-striped"  [mfData]="listdata | dataFilter : filterQuery " #mf="mfDataTable"
                   [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">

我正在使用 angular2-datatable。

我正在使用此管道过滤数据并将其显示在数据表中。我想将过滤后的数据保存在一个变量中，以便可以在我的应用程序的其他地方使用它。

【问题讨论】：

管道转换模板内的显示值。 - 是管道的角度定义。为什么要保存它？
@Aravind 我有一个数据表中的位置列表。如果用户过滤列表，我只想使用谷歌地图上的标记查看那些过滤的位置。
您应该允许用户select from the list 这是您应该保存在数据库中的内容

标签： angular typescript filter datatable pipe

【解决方案1】：

在你的模块中提供管道：

@NgModule({
    ...
    providers: [DataFilterPipe]
})
export class MyModule {
    ...
}

然后在你的组件中注入并使用它：

export class MyComponent implements OnInit {

    public filtered;

    constructor(private dataFilterPipe: DataFilterPipe) {
    }

    ngOnInit() {
        const unfiltered = ...;
        const filterQuery = ...;
        this.filtered = this.dataFilterPipe.transform(unfiltered, filterQuery);
    }
}

您现在可以将数据表直接绑定到 filtered 属性以避免过滤两次：

<table [mfData]="filtered" ...>

虽然现在我想知道你是否需要声明一个管道。

【讨论】：

非常感谢！我想知道为什么我必须在构造函数中使用这个？
你不必在构造函数中使用它。查看我的编辑。