角度过滤器表使用自定义管道按钮单击

Question

我有一个表，我成功使用自定义管道过滤。该过滤器基于两个输入，它们一起形成一个表格。我想添加的功能是在单击提交按钮之前不会发生过滤。所以它更像是一个搜索按钮。我发现很多关于管道的信息，但没有关于按钮点击时激活它们的信息。

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：

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

搜索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; 
    }); 
    } 
} 

Answer 1

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

首先，定义所代表的过滤结果

let theFilteredData: DataTable[] 

更改绑定绑定到theFilteredData，而不是第二个属性：

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

在提交功能：

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

Answer 2

您可以切换过滤的for循环用单击提交时切换的布尔值：

*。html的：

<div> 
    <label>Start Date:</label> 
     <input type="text" [(ngModel)]="startDateValue"> 
    </div> 
    <label>End Date:</label> 
     <input type="text" [(ngModel)]="endDateValue"> 
    </div> 
    <tr *ngIf="filterToggle" *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> 
    <tr *ngIf="!filterToggle" *ngFor="let dPoint of theData; 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()"></button> 
</div> 

* .TS：

submit() { 
    this.filterToggle = !this.filterToggle; 
} 

犯规保持模板代码了，但它应该工作。

另一个想法是通过管道发送一个布尔型'filterToggle'，所以管道本身不会过滤，除非'filterToggle'为true。所以如果你点击提交，切换应该变为true，并且管道将被过滤。

所以你的* ngFor应该是这样的：

<tr *ngFor="let dPoint of theData | searchDates:startDateValue:endDate:filterToggle; let idx = index; let even=even"> 
    ... 
</tr> 

或者，你可以只筛选，而不是把它通过管道实际数据。

submit(){ 
    this.theData = this.theData.filter(data => 
    return data.tStartDate >= this.startDateValue && data.tEndDate <= this.endDateValue); 
} 

所以当你点击提交时，通过过滤来改变原来的theData数组。您可能必须使用确定要过滤的布尔表达式。它应该只保留开始日期大于或等于'this.startDateValue'且小于或等于'this.endDateValue'的'数据'。但是，这将覆盖原始的theData数组。所以我会创建一个临时数组，以便您可以恢复到未过滤的数据。