Angular 当存在'；输入值有什么变化？

我有一张表格，上面填写了如下数据：

  <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>

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

我想做的是从控制器而不是html调用管道，因为我需要一个变量来保存过滤后的数据。因为我需要以csv格式导出过滤后的数据。在控制器中，我有一个这样做的函数：

this.allData.forEach（（row:MyData）=>{csvContent+=MyData.toCsv（row）+“\r\n”；}）

所以在组件ts中，我在想，在导入它以如下方式初始化它之后：

  <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>

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

然后在html上有：

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

我绑定了下拉列表的模型和两者的输入字段。
我如何在不破坏现有流程的情况下管理它？
如何使在ngOnInit上返回的内容首先过滤为今天的日期，然后显示

当我在html中使用它时，在管道函数中，我有一个if（startDate empty）then默认的片刻过滤器（）。Else筛选startDate。
由于管道纯粹是表示性的，不能改变其数据源，因此我建议完全在组件中进行筛选

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

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

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

然后，只需将筛选函数绑定到筛选下拉列表的事件（类似于
（ngModelChange）=“filterList（$event.target.value）”
），这样当您更改下拉列表时，它就会运行筛选

然后始终显示过滤后的数据：
，当
filteredData
更改时，更改检测将为您更新列表

编辑
由于您只需要显示10行数据，因此可以编写第二个实用程序函数，存储光标位置，切片并返回所需的窗口：

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
。
“从控制器而不是html调用管道”：管道仅在模板中使用，因为它们纯粹是表示性的。这可能是一个，那么为什么在控制器中需要一个包含过滤数据的变量呢？我从服务中获取所有数据，然后在ngOnInit上返回，然后在表中过滤它。但我需要以csv格式导出过滤后的数据。在控制器中，我有一个这样做的函数：`this.allData.forEach（（row:MyData）=>{csvContent+=MyData.toCsv（row）+“\r\n”；}）；`我需要将所有数据作为筛选数据：|谢谢你的澄清，我已经把它添加到问题中了。非常感谢。同时，我对我显示的对象进行切片，每次10行。所以每次我进入allData数组时，在Croll上再增加10次，我是否应该对filteredData执行同样的操作？这样它就可以过滤这些值了？@JenPen更新了。如果答案有用，你可以投票表决。如果它解决了您的问题，您可以单击复选标记。否则，继续评论：）这是非常有用的，但现在它变得混乱哈哈。onScroll函数就是ngx无限滚动调用的函数。到目前为止，我得到的是：在ngOnInit上，切片显示数据，只显示10。在onScroll上-获取显示数据的长度。以及服务返回的所有数据的长度。如果displayedData较小，则从allData向displayedData再推10次。我现在问的是返回filteredData。切片时是否应该使filteredData=displayedData？但是谢谢你！！我马上就用你的方式试试：）@JenPen我只是根据从问题中收集到的信息提供了一些说明性的模式。你不需要特别使用我的滚动功能。这个想法就是你可以使用三个列表：主列表、过滤列表和窗口列表。如果ngx scroll（我不知道）能够更好地管理窗口（切片数据），只需将
filteredData
传递给它即可。可能吧。啊，谢谢。我编辑了一个问题，该问题解释了在不同的函数中将过滤从管道移动到控制器的哪一部分让我感到困惑。但我会把你的答案标记为正确，就像它回答了我最初的问题一样