Question

StackBlitz link

我试图在startDate和endDate的基础上搜索调查列表，并且在startDate和endDate的基础上，它应该只返回那些包含startDate和endDate的调查。所以为此我写了一个管道，但我认为这个逻辑有问题，因为在搜索调查列表后根本不可读。所有那些字符串到javascript日期对象的转换在模板中相互重叠。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

现在可以通过进一步添加＆＃39; shortDate＆＃39;来实现此排序过滤器。像这样的参数： <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

搜索后调查列表不可读

1 个答案: