日期选择器过滤管

时间:2019-11-30 21:09:01

标签: html angular angular-pipe ng-modules

在我的app.component.html页面中,我设计了一个使用ngFor加载数据的表格,以及一个输入日期范围的输入表单。我设计了一个自定义管道,以过滤掉用户输入的日期范围之外的数据。我要打印出出生日期在所选时间范围内的所有用户行。

app.component.html:

    <input type="text" matInput
            id = 'calander'
            ngxDaterangepickerMd
            [locale]="{ applyLabel: 'Okay', format: 'YYYY/MM/DD'}"
            startKey="start"
            endKey="end"
            [(ngModel)]="selected"
            name="daterange"/>
            <button class="ripple"type="submit"></button>

<tr *ngFor="let user of users | myfilter:selected" >
              <td class="tg-0lax" id="tableText">{{ user.FirstName}}</td>
              <td class="tg-0lax" id="tableText">{{ user.LastName}}</td>
              <td class="tg-0lax"><b>{{ user.DoB| date: 'yyyy/MM/dd'}}</b></td>
            </tr>

app-filter.pipe.ts:

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

@Pipe({
    name: 'myfilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: Object): any {  //1. List to filter, 2. Selected items
        if (!items || !filter) {
            return items;
        }
        return items.filter(item =>
            item.DoB>= filter.start && item.DoB<= filter.end);
    }
}

当我运行ng build时,它返回以下错误: 错误TS2339:类型“对象”上不存在属性“开始”。,并且 错误TS2339:类型“对象”上不存在属性“结束”

如何在ngModule中引用数据以使其正常工作?

0 个答案:

没有答案