Question

在Angular中，我有一个Observable形式的对象列表，我从service中获取ngFor。现在，我通过将列表传递给Pipe并将其取回来对选择下拉列表中的值进行过滤。但是，尽管执行了管道transform功能，但它并没有在HTML中更新。任何帮助将不胜感激。

component.ts

providers: [CompanyPipe]
export class CommonTableComponent implements {
constructor(private companyPipe: CompanyPipe){ }
data: any[] = [];
this.data = this.companyPipe.transform(this.data, object.value);
}

component.html

<tr *ngFor="let item of data">
 <td>{{item.name}}</td>
</tr>

管

@Pipe({
  name: 'company'
})
export class CompanyPipe implements PipeTransform {

  company: any[];

  constructor(private detailsService: DetailsService) {}

  transform(value: any[], param?: number): any[] {
    if (param === undefined) {
      return value;
    }

    for (const item of value) {
      // tslint:disable-next-line:triple-equals
      if (item.comp_id == param) {
        this.company.push(item);
      }
    }
    if (this.company.length < 10) {
      // this.detailsService.flag = false;
    }
    return this.company;
  }
}

Answer 1

如果您的目的是过滤动态数据

，那么不应该使用管道

this.data = this.companyPipe.transform(this.data, object.value)

上面的行只会在组件加载时（即构造函数运行时）过滤项目之后的任何事件，例如从下拉列表中选择不会使数据进入过滤器

而不是试试这个

<tr *ngFor="let item of data | company">
 <td>{{item.name}}</td>
</tr>

通过这种方式，它将使用管道

动态过滤

更新过滤器上的列表

1 个答案: