单击按钮后使用自定义管道的角度过滤器表 [英] Angular filter table using custom pipe upon button click

问题描述

我有一张表，可以使用自定义管道成功过滤。过滤器基于两个输入，它们是一个表单。我要添加的功能是在单击提交按钮之前不会进行过滤。因此，它更像是一个搜索按钮。我已经找到了很多有关管道的信息，但是与单击按钮时激活它们无关。

I have a table which I successfully filter using a custom pipe. The filter is based on two inputs which are together a form. The functionality I want to add is for the filtering not to happen until a submit button is clicked. So it's more like a search button. I've found plenty of information on pipes, but nothing about activating them upon button clicks.

mainpage.component.html：

mainpage.component.html:

<div>
  <label>Start Date:</label>
  <input type="text" [(ngModel)]="startDateValue">
</div>
  <label>End Date:</label>
  <input type="text" [(ngModel)]="endDateValue">
</div>
//'let idx=index' and 'let even=even' are used to change color of the rows but I took out that code. The 'onClick' function just takes the row and uses an EventEmitter to output it.
<tr *ngFor="let dPoint of theData | searchDates:startDateValue:endDateValue; let idx=index; let even=even;" (click)="onClick(dPoint, idx)">
  <td>{{dPoint.tDataPoint}}</td>
  <td>{{dPoint.tICCP}}</td>
  <td>{{dPoint.tStartDate}}</td>
  <td>{{dPoint.tEndDate}}</td>
</tr>
//the button that will execute the filtering
<button type="submit" class="btn icon-search" [disabled]="!secondForm.valid" (click)="submit(secondForm.value)"></button>

mainpage.component.ts：

mainpage.component.ts:

@Component({
  selector: 'main-page',
  styleUrls: ['../app.component.css'],
  templateUrl: 'mainpage.component.html',
  providers: [DataTableService, DatePipe]
})

export class MainPageComponent implements OnInit {
  secondForm : FormGroup;
  theData:DataTable[] = [];

  constructor(fb: FormBuilder, private datePipe: DatePipe, private dataService: DataTableService, private cdRef:ChangeDetectorRef){
    this.secondForm = fb.group({
      'startDate' : [null, Validators.required],
      'endDate' : [null, Validators.required]
    }, {validator: this.endDateAfterOrEqualValidator})
  }

  getTable(): void {
    this.dataService.getTable().then(theData => this.theData = theData);
    this.cdRef.detectChanges();
  }

  submit(value: any){
      //where I'd want to trigger the filtering/pipe
  }
}

search-pipe.ts：

search-pipe.ts:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "searchDates"
})

export class SearchPipe implements PipeTransform {
  transform(value, minDate , maxDate){
    return value.filter(row => {
      return row.tStartDate >= minDate && row.tEndDate <= maxDate;
    });
  }
}

推荐答案

您可以考虑删除管道，而只是在用户单击按钮时自己过滤数据。

You could consider dropping the pipe and instead just filtering the data yourself when the user clicks the button.

首先，定义代表过滤结果的第二个属性

First, define a second property that represented the filtered result

let theFilteredData: DataTable[]

更改绑定以绑定到theFilteredData：

Change your binding to bind to theFilteredData instead:

*ngFor="let dPoint of theFilteredData;" //rest of *ngFor not included

在Submit函数中：

In the submit function:

this.theFilteredData = this.theData.filter(row => 
      return row.tStartDate >= minDate && row.tEndDate <= maxDate);

这篇关于单击按钮后使用自定义管道的角度过滤器表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！