ボタンのクリック時にカスタムパイプを使用する角度フィルタテーブル

Question

カスタムパイプを使用して正常にフィルタリングするテーブルがあります。フィルタは、フォームを構成する2つの入力に基づいています。追加したい機能は、送信ボタンがクリックされるまで、フィルタリングが行われないようにすることです。だから、それは検索ボタンのようなものです。私はパイプに関するたくさんの情報を見つけましたが、ボタンをクリックするとそれらをアクティブにすることについては何もしていません。

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

パイプを削除し、ユーザーがボタンをクリックしたときにデータをフィルタリングすることを検討することもできます。送信関数で

*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; 
} 

doesntのダウンテンプレートコードを保持し、それが動作するはずです。

別の考え方では、パイプを通じてブーリアン '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'以下である 'data'のみを保持する必要があります。ただし、元のtheData配列を上書きすることになります。したがって、一時的な配列を作成して、フィルタされていないtheDataに戻すことができます。