Question

我有Angular 2 app，我使用angular2-highcharts。我从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);
}

Answer 1

问题是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';进行此操作。

如何使用datepicker Angular2 app中的日期过滤json数据

1 个答案: