カスタムパイプを使用した2つの入力に基づくAngular2フィルタテーブル

Question

私は2つの列が文字列として表される日付を持つテーブルを持っています。 2つの入力（2つのngb-datepickersによって設定され、デフォルト値はnull）に基づいてテーブルをフィルタリングします。カスタムパイプを使用して、私は現在、コンソールエラーCannot read property '0' of undefinedを取得しています。私のテーブルはページにレンダリングされず、ボタンも機能せず、フォームの検証は機能しません。カスタムパイプをapp.module.tsの宣言にインポートします。スコープ全体を表示するための最小限のコードが含まれています。紛らわしいことがあれば教えてください。

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> 

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(); 
    } 
} 

検索-pipe.ts：

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

@Pipe({ 
    name: "searchDates" 
}) 

//if I comment out the code inside the transform function, I get no console errors, all functionality previously mentioned that stopped working now does again, but my entire table still does not render 
export class SearchPipe implements PipeTransform { 
    transform(value, args?){ 
    let firstDate = new Date(args[0]); 
    let secondDate = new Date(args[1]); 
    //let [minDate, maxDate] = args; 
    return value.filter(row => { 
     return row.tStartDate >= firstDate && row.tEndDate <= secondDate; 
    }); 
    } 
} 

私は私の問題は、不適切な構文と考えています/私の変換関数の機能私は同様の問題like thisを見たことがありますが、私は自分のニーズに合わせてフォーマットすることができず、Angular2、特にパイプにあまりにも慣れていないようです。

Answer 1

argが配列でないこのパイプについての詳細は後にちょうど最初のものです：

export class SearchPipe implements PipeTransform { 
    transform(value, firstDate , secondDate , arg3 , arg4){ 

    return value.filter(row => { 
     return row.tStartDate >= firstDate && row.tEndDate <= secondDate; 
    }); 
    } 
} 

Answer 2

私の問題の解決策として、これがあなたの例に役立つことを願っています。

async buikd-inパイプを使用して、約束を解決した後にのみフォームを進めるようにAngularに通知してください。

あなたの例のように見えることがあります。

<tr *ngFor="let dPoint of theData | async | 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> 

しかし、最初にあなたがtheDataタイプを変更する必要があります - あなたは、したがって、このアプローチをあなたのリピータを使用して戻り値の型として

var theData: Promise<DataTable> = null; 
this.theData = this.dataService.getTable(); 

を約束する必要がproceessing起動しません。あなたの約束が解決されない限りあなたのデータ。この段階ではデータを持ち、searchDatesパイプは空のデータ例外を発生させません。ここで

は、https://angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html