1

2 つの列が文字列として表される日付であるテーブルがあります。2 つの入力 (2 つの ngb-datepicker によって入力され、デフォルト値は 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();
  }
}

検索パイプ.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;
    });
  }
}

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

4

2 に答える 2

1

arg は配列ではなく、 の後の最初のものです:

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

    return value.filter(row => {
      return row.tStartDate >= firstDate && row.tEndDate <= secondDate;
    });
  }
}
于 2016-12-29T13:50:21.067 に答える
0

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

asyncbuikd-in パイプを再利用して、Promise の解決後にのみフォームの構築を続行するように 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();

したがって、このアプローチを使用すると、約束が解決されなくなるまで、リピーターはデータの処理を開始しません。この段階では、データがあり、searchDatesパイプによって空のデータ例外が発生することはありません。

このパイプの詳細は次のとおりですhttps://angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html

于 2016-12-29T13:47:36.123 に答える