* ngFor之后如何从具有Angular2的组件中获取经过过滤的数据 [英] How to get filtered data after *ngFor from component with Angular2

问题描述

我尝试获取组件中数据的过滤列表.鉴于我有这样的事情:

I try to get filtered list of data in my component. In view i have something like this:

<ng-container *ngIf="(items | filter:search.value) as result">
  <div *ngFor="let item of result">
    {{item}}
  </div>
</ng-container>

我需要从组件中获取 result .是的，我可以将 {{result_setter(result)}} 添加到ng-container，并在component中创建带有变量的方法:

And I need to get result from component. Yes, I can add {{result_setter(result)}} to ng-container, and create method with variable in component:

filtered_data;

result_setter(data) {
  this.filtered_data = data;
}

但是看起来很烂.有人可以帮忙吗?我发现这篇文章 https://netbasal.com/using-pipe-results-in-angular-templates-430683fa2213 ，评论中的用户也有此问题

But it's look like shit. Can anybody help? I found this article https://netbasal.com/using-pipe-results-in-angular-templates-430683fa2213, and users in comments has this problem too

推荐答案

管道仅用于显示数据.

如果要过滤值并将其放入组件中，请考虑在查询更改时过滤它们.

If you want to filter your values and get them in your component, consider filtering them on query change.

<input type="file" [(ngModel)]="search" (input)="filterData">

filterData() {
  this.filteredData = this.data.filter(item => /* your filtering */);
}

编辑，您也可以使用管道实例来过滤数据

EDIT You can also use an instance of your pipe to filter your data like so

filterData() {
  const pipe = new FilterPipe(); // Consider moving this as a class member
  this.filteredData = pipe.transform(this.data, this.search);
}

这篇关于* ngFor之后如何从具有Angular2的组件中获取经过过滤的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！