0

所以我必须进行相当复杂的过滤（我设法做到了），但现在我几乎被卡住了，我必须对更多的日期选择器使用相同的过滤器（或至少相同的逻辑）（值得一提日期选择器的数量是动态生成的），但是每个日期选择器都有不同的日期必须过滤。

（顺便说一句，我在 Material 表中有这些日期选择器，我有每一行的索引，因此我可以从后端检索该日期选择器的过滤日期）

我以为我可以这样做：

 <mat-date-range-input [rangePicker]="picker" [dateFilter]="date_picker_filters(i)">

其中“i”是 Mat Table 的行索引

在我这样做的组件中：

  public date_picker_filters= (d: Date, i: number): boolean => {

  ................... filtering logic .....................

  }

但它并没有真正起作用。

有任何想法吗？

4

2 回答 2

0

在研究了互联网之后，仍然没有回应，所以我找到了一种方法来做到这一点，不是一个真正干净的方法，但我认为这是唯一的选择：

您必须在组件中创建一个变量

var current_index: number

此外，您必须创建一个函数，将该行的值（或您拥有的任何索引）分配给该变量

public current_index_assing(current_index: number) {
  this.current_index = current_index
}

（我使用有一个按钮的 Mat Daterange 选择器来打开日期选择面板）然后，在 html 文件中，执行在单击日历图标时设置索引的函数：

<mat-datepicker-toggle matSuffix [for]="picker" (click)="current_index_assing(index)"></mat-datepicker-toggle>

同样，我认为这不是一个干净的方法，但它有效

于 2021-08-18T06:25:43.327 回答
0

我们可以这样想：

/**this NOT WORK***/
<mat-date-range-input [rangePicker]="picker"
         [dateFilter]="date_picker_filters(i)">


date_picker_filters(index:number){
   return (date:any)=>{
      console.log(index,date)
      ..your logic can use "index"..
      return true;
   }
}

但是我们的应用程序“崩溃”了，因为我们在 .html 中添加了一个函数，并且 Angular 检查是否发生了变化，请参阅这篇Jurgen Van de Moere 的文章，所以我们可以采取另一种方法

定义过滤器数组

filters:any[]=[]

在 ngOnInit 中，给出值，我们感兴趣的很多（在代码中我只使用了 2 个 mat-datepickers）

ngOnInit(){
    [0,1].forEach(x=>{
      this.filters[x]=this.date_picker_filters(x)
    })
  }

然后我们可以使用

<mat-date-range-input [rangePicker]="picker" 
    [dateFilter]="filters[i] || null">

堆叠闪电战

于 2021-08-18T08:15:03.100 回答