調査リストは、私は、それがたstartDateを含めるのみ調査を返す必要がありますたstartDateとendDateに基づいてとたstartDateとendDateに基づいて調査リストを検索しようとしています

Question

StackBlitz link

を検索した後読み取れませんとendDate。 そのために私はパイプを書いたが、調査リストを検索した後に何かが間違っていると思う。文字列をjavascriptの日付オブジェクトに変換するすべてのものは、テンプレート内で互いに重複しています。 今

import { OrderByPipe } from '../../pipes/order-by.pipe'; 
 
import { Component, ViewChild, ElementRef, OnInit } from '@angular/core'; 
 
@Component({ 
 
    selector: "app-survey-info", 
 
    templateUrl: "./survey-info.component.html", 
 
    styleUrls: ["./survey-info.component.scss"] 
 
}) 
 
export class SurveyInfoComponent implements OnInit { 
 
    @ViewChild('myCanvas') canvasRef: ElementRef; 
 
    surveyRecords: Array<any>; 
 
    startDate; 
 
    endDate; 
 
    date; 
 
    constructor() { } 
 

 
    ngOnInit() { 
 

 
       this.surveyRecords = 
 
       [{ surveyID: 1, surveyName: "survey1", date: '1/10/2016' }, 
 
       { surveyID: 9, surveyName: "survey9", date: '1/12/2016' }, 
 
       { surveyID: 3, surveyName: "survey3", date: '9/10/2016' }, 
 
        { surveyID: 5, surveyName: "survey5", date: '11/10/2016' }, 
 
        { surveyID: 6, surveyName: "survey6", date: '16/10/2016' }, 
 
        { surveyID: 7, surveyName: "survey7", date: '19/10/2016' }, 
 
        { surveyID: 8, surveyName: "survey8", date: '21/10/2016' }, 
 
        { surveyID: 4, surveyName: "survey4", date: '10/10/2016' }, 
 
        { surveyID: 10, surveyName: "survey10", date: '1/10/2017' }, 
 
        { surveyID: 2, surveyName: "survey2", date: '5/10/2016' }, 
 
        { surveyID: 11, surveyName: "survey11", date: '5/10/2017' }, 
 
         { surveyID: 12, surveyName: "survey12", date: '15/10/2017' }, 
 
         { surveyID: 13, surveyName: "survey13", date: '25/10/2017' }]; 
 
      } 
 
} 
 

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

 
@Pipe({ 
 
    name: 'orderBy' 
 
}) 
 

 
    
 

 
    export class OrderByPipe implements PipeTransform { 
 

 
    transform(surveyRecords: any, args ? : any): any { 
 

 
     if (args.startDate === undefined && args.endDate === undefined) { 
 
      return surveyRecords; 
 
     } else { 
 
// console.log(surveyRecords, args.startDate, args.endDate); 
 
let startDate = new Date(args.startDate); 
 
let endDate = new Date(args.endDate); 
 
if (startDate && endDate) { 
 
// console.log(surveyRecords); 
 
    if (surveyRecords) { 
 
    for (let i = 0; i < surveyRecords.length; i++) { 
 
     // var surveyRecords[i]= new Date(); 
 
     surveyRecords[i].date = new Date(surveyRecords[i].date); 
 
    // console.log(surveyRecords[i].date); 
 
     if (
 
     surveyRecords[i].date >= startDate || surveyRecords[i].date <= endDate 
 
    ) { 
 
const array: any = surveyRecords; 
 
     return array; 
 
    } 
 
    } 
 
} 
 

 
     } 
 
    } 
 

 
} 
 
}

<mat-nav-list class="surveys"> 
 
<mat-form-field class="datepicker"> 
 
    <input matInput class="datepicker" 
 
[(ngModel)]="startDate" 
 
    [matDatepicker]="picker1" 
 
    placeholder="Start Date "> 
 
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> 
 
    <mat-datepicker #picker1></mat-datepicker> 
 
</mat-form-field> 
 
<mat-form-field class="datepicker"> 
 
    <input matInput class="datepicker" 
 
    [(ngModel)]="endDate" 
 
    [matDatepicker]="picker2" 
 
    placeholder="End Date "> 
 
    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle> 
 
    <mat-datepicker #picker2></mat-datepicker> 
 
</mat-form-field> 
 
<!-- <div>{{startDate}}</div> --> 
 
    <strong class="survey-list">Surveys 
 

 

 
    </strong> 
 

 
    <a mat-list-item 
 
    *ngFor="let survey of surveyRecords|orderBy: {startDate: startDate, endDate: endDate}"> 
 
    <span>{{ survey.surveyName }} 
 
<br> 
 
    <strong><small>{{survey.date}}</small></strong></span> </a> 
 

 
</mat-nav-list>

Answer 1

さらに、このように 'shortDate' パラメータを追加することで、このソートフィルタを実装することができ： <small>{{survey.date|date:'shortDate'}}</small> 及びこれに私のパイプのコードを変更：

export class OrderByPipe implements PipeTransform { 
transform(surveyRecords: any, args ?: any): any { 
    if (args.startDate === undefined || args.endDate === undefined) { 
     return surveyRecords; 
    } else if (args.startDate === null || args.endDate === null) { 
     return surveyRecords; 
     } else { 
     const startDate = new Date(args.startDate); 
     const endDate = new Date(args.endDate); 
     const result = []; 
     for (let i = 0; i < surveyRecords.length; i++) { 
      surveyRecords[i].date = new Date(surveyRecords[i].date); 
      console.log(surveyRecords[i].date); 
      console.log(surveyRecords[i].date.getTime(), startDate.getTime(), 
      surveyRecords[i].date.getTime(), endDate.getTime()); 
      if (surveyRecords[i].date.getTime() >= startDate.getTime() && 
      surveyRecords[i].date.getTime() <= endDate.getTime()) { 
      const obj = { surveyID: surveyRecords[i].surveyID, 
       surveyName: surveyRecords[i].surveyName, 
       date: surveyRecords[i].date }; 
      result.push(obj); 
      console.log(result); 
      } else { 
     console.log('no record found!!'); 
      } 
     } 
     return result; 
     }}} 

working code