如何从datepicker Angular2应用程序过滤带有日期的json数据

我有angular2应用程序，我使用angular2海图。 我从json获取highcharts的数据，但我想按开始日期和结束日期筛选图表中使用的数据。 有人能帮我解答这个问题吗，或者给我一个教程的链接，或者一些我能找到相关信息的东西

我使用mydaterangepicker，有一个从json获取数据的服务：

    @Injectable()
export class ValuesService {

  http: Http;
  constructor(http: Http) {
      this.http = http;
  }

    getValues(beginDate: Date, endDate: Date):
        Observable<Values> {
        return this.http.get('http://localhost:54122/api/ProductionValues/GetProductionValuesDATETIME?startDate=' + beginDate +'&endDate=' + endDate)
            .map(this.extractData)
            .catch(this.handleError)
    }

    private extractData(res: Response) {
        let body = res.json();
        return body || {};
    }

    private handleError(error: any) {
        // // In a real world app, we might use a remote logging infrastructure
        // // We'd also dig deeper into the error to get a better message
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
}

@Injectable（）
导出类值服务{
http:http；
构造函数（http:http）{
this.http=http；
}
getValues（开始日期：日期，结束日期：日期）：
可观察{
返回此.http.get（'http://localhost:54122/api/ProductionValues/GetProductionValuesDATETIME?startDate=“+beginDate+”&endDate=”+endDate）
.map（此.extractData）
.接住（这个.把手错误）
}
私有数据（res:Response）{
让body=res.json（）；
返回体| |{}；
}
私有句柄错误（错误：任意）{
////在现实世界的应用程序中，我们可能会使用远程日志记录基础结构
////我们还将深入研究错误，以获得更好的信息
让errMsg=（error.message）？error.message：
error.status？`${error.status}-${error.statusText}`:'服务器错误'；
console.error（errMsg）；//改为登录到控制台
返回可观察抛出（errMsg）；
}

问题在于

res.json（）

以字符串形式返回日期。最后，我在应用程序中更改了http get调用的映射，如下所示：

.map(res => {
            let jsonData = res.json();
            for (let obj of jsonData) {
                for (let prop in obj) {
                    if (moment(obj[prop], moment.ISO_8601).isValid()) {
                        obj[prop] = new Date(obj[prop]);
                    }
                }
            }
            return jsonData;
      })

基本上，这使用momentjs将任何有效格式的字符串转换为实际的日期对象，而不是字符串。您可能需要根据从服务器返回数据的方式更改format参数

---

另外，请注意，您需要在项目上执行

npm install moment

，并在组件上执行

import*as moment from'moment'；

，以使此工作正常。

问题在于

res.json（）

将日期作为字符串返回。最后，我在我的应用程序中更改了http get调用的映射，如下所示：

.map(res => {
            let jsonData = res.json();
            for (let obj of jsonData) {
                for (let prop in obj) {
                    if (moment(obj[prop], moment.ISO_8601).isValid()) {
                        obj[prop] = new Date(obj[prop]);
                    }
                }
            }
            return jsonData;
      })

基本上，这使用momentjs将任何有效格式的字符串转换为实际的日期对象，而不是字符串。您可能需要根据从服务器返回数据的方式更改format参数

---

另外，请注意，您需要在您的项目上执行

npm install moment

，并在组件上执行

import*as moment from'moment'；

以使其正常工作。

这是关于angular2的问题，因为您将范围参数传递给服务器api，也许您应该在那里处理过滤？我想在应用程序中使用datepickerYou选择日期范围r服务器应该处理这个问题，接受这些参数并只返回这些值，或者返回所有数据并在客户端进行过滤（这不是一个好选项）。根据您的API，您的服务器应返回过滤后的数据。我在mydaterangepicker中选择beginDate和endDate，因此我有两个值2016-10-06、2016-10-13，我如何将此值提供给我想要的服务。有此url:

>您应该通过其API从datepicker获取范围值，然后将其解析为日期类型并传递给您的服务dpoint这是关于angular2的问题，因为你将范围参数传递给服务器api，也许你应该在那里处理过滤？我想在应用程序中选择date range和DatePickery你的服务器应该处理这个问题，接受这些参数并只返回那些值，或者返回所有数据并在客户端进行过滤（这不是一个好选项）。根据您的API，您的服务器应返回过滤后的数据。我在mydaterangepicker中选择beginDate和endDate，因此我有两个值2016-10-06、2016-10-13，我如何将此值提供给我想要的服务。有此url:
>您应该通过其API从datepicker获取范围值，然后将其解析为日期类型并传递给您的服务点