当输入值发生变化时，何时从控制器调用管道？

Question

我有一个 table 填写了这样的数据：

  <tr *ngFor="let row of allData | filterPipe:color:currentDate ">
          <td *ngIf="row != -1">{{row.date| date:'MM/dd/yy'}} </td>
          <td>{{row.Color}}</td>
          <td>{{row.Name}}</td>

我有一个根据颜色和日期过滤的管道:

  transform(value: any, color: any, currentData: any):any{
      if(color)
            value=value.filter(item=>item.Color==color));
      filter by date
   return value
  }

我想要做的是从控制器而不是 html 调用管道，因为我需要有一个变量来保存过滤后的数据。因为我需要将过滤后的数据导出为csv格式。在控制器中，我有一个函数可以做到这一点：this.allData.forEach((row: MyData) => { csvContent += MyData.toCsv(row) + "\r\n"; });

所以我在考虑在组件 ts 中导入它之后像这样初始化它:

    let filterPipe=new FilterPipe();
    this.filteredData=filterPipe.transform(this.allData,this.color,this.currentDate)

然后在html上有：

   <tr *ngFor="let row of filteredData">

但据我所知，无论何时选择颜色（它是来自 ngModel 的下拉值）或 currentDate，它都会调用管道。我在哪里调用控制器中的管道，以便以相同的方式调用它？除了我真的需要访问 filteredData 以便我以后可以导出它。

或者，如果有一种方法可以在过滤后的数据返回后将其绑定到控制器，这样我就可以将其作为控制器中的一个对象进行导出。

感谢任何指导！

编辑：

最初我想要一个默认过滤器，用于过滤 date=now 的数据。该数据将被切片 10 并根据需要在滚动中添加更多。然后用户可以选择根据颜色过滤并更改日期。

所以如果我有一个函数

filterByDate(date:any){
this.filteredData=this.allData.filter... where date=date
}

filterByColor(color:string)
{
this.filteredData=this.allData.filter where color=color;
}

并且我绑定了下拉列表的 ngModel 和两者的输入字段。我如何在不破坏现有流程的情况下进行管理？如何让 ngOnInit 返回的内容首先针对今天的日期进行过滤，然后显示？

当我在 html 上使用它时，在管道函数上我有一个 if(startDate empty) then default filter for moment()。开始日期的其他过滤器。

Answer 1

由于管道纯粹是表示性的，不能改变它们的数据源，我建议完全在组件中进行过滤。

首先，在组件中实现你的过滤功能，比如

filterList(color: string) {
  this.filteredData = this.allData.filter(item => item.Color === color);
}

不要忘记，当您第一次拨打服务电话以获取 allData 时，您还将 filteredData 设置为完整列表。

然后，只需将您的过滤器函数绑定到过滤器下拉列表的 (ngModelChange) 事件（类似于 (ngModelChange)="filterList($event.target.value)"），这样当您更改下拉列表时，它会运行您的过滤器。

然后始终显示过滤后的数据：<tr *ngFor="let row of filteredData"> 并且更改检测会在 filteredData 更改时为您更新列表。

编辑

由于您只需要显示 10 行数据，您可以编写第二个实用函数，存储光标位置、切片和 return 所需的 window:

cursor: number = 0;

function onScroll(down: boolean) {
  // Slice your array
  this.windowData = this.filteredData.slice(this.cursor,
    down ? this.cursor + 10 : this.cursor - 10);

  // Update the cursor to your new position
  this.cursor = down ? this.cursor + 10 : this.cursor - 10;
}

而是在 *ngFor 中显示 windowData，同时记得将第一个 windowData 设置为加载。

当输入值发生变化时，何时从控制器调用管道？

When to call pipe from the controller when there's a change on the input values?

angular

angular5

编辑