角度過濾器表使用自定義管道按鈕單擊

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數組。所以我會創建一個臨時數組，以便您可以恢復到未過濾的數據。