Angular 5"地图未定义"

时间:2018-05-11 20:10:43

标签: json rxjs observable angular5

我有.Net 4.6.2 VS 2017 Mvc应用程序,使用Angular 5," rxjs":" ^ 5.5.10"

我正在尝试通过控制器获取Kendo UI网格的数据。控制器返回我可以看到的数据,但是在代码.map(response => response.json())的服务类中,它表示非法返回语句。(请参阅附图) image

err img2

这是vto.service.ts

   import { Injectable } from '@angular/core';
    import { VTO } from './vto';
    import { Http, HttpModule, Headers,  Response } from '@angular/http';
    import { HttpClientModule, HttpClient, HttpHeaders} from '@angular/common/http';
    import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/Rx';
    import { BehaviorSubject } from 'rxjs/BehaviorSubject';
    const httpOptions = {
        headers: new HttpHeaders({ 'Content-Type': 'application/json' })
    };
    import {
        toDataSourceRequestString,
        translateDataSourceResultGroups,
        translateAggregateResults,
        DataResult,
        DataSourceRequestState
    } from '@progress/kendo-data-query';
    import 'rxjs/add/operator/map';

    import { GridDataResult, DataStateChangeEvent } from '@progress/kendo-angular-grid';

    @Injectable()
    export class Vtos {


       //  private vtoUrl = location.href.replace(location.hash, '') + '/home/GetVtos';

        private vtoUrl = 'http://localhost:63213/Home/GetVtos';

        constructor(private http: Http) { }

            public getVtos(state: DataSourceRequestState): Observable<DataResult> {

            const queryStr = `${toDataSourceRequestString(state)}`; //serialize the state
            const hasGroups = state.group && state.group.length;
            return this.http
              .get(`${this.vtoUrl}?${queryStr}`) //send the state to the server
              .map(response => response.json())
              .map(({ data, total/*, aggregateResults*/ }) => // process the response
                (<GridDataResult>{
                  //if there are groups convert them to compatible format
                  data: hasGroups ? translateDataSourceResultGroups(data) : data,
                  total: total,
                  // convert the aggregates if such exists
                  //aggregateResult: translateAggregateResults(aggregateResults)
                }))
        }
    }

HomeController调用GetVots

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using VTO.DTO;
using VTO.DAL;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
namespace VTO.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [HttpGet]
        public JsonResult GetVtos([DataSourceRequest]DataSourceRequest request)
        {
            return new JsonResult
            {
                ContentType = "application/json",
                Data = Vto.GetVtos().ToDataSourceResult(request),
                JsonRequestBehavior = JsonRequestBehavior.AllowGet,
                MaxJsonLength = int.MaxValue
            };
        }
}

2 个答案:

答案 0 :(得分:1)

此处有一些观察结果,此模块已弃用See details here从您的应用中删除它。

import { Http, HttpModule, Headers,  Response } from '@angular/http';

您应该使用HttpClientModule

import { HttpClient, HttpHeaders} from '@angular/common/http';

请注意,您必须在 app.module.ts (或您对其有依赖关系的任何其他模块)中导入HttpClientModule

import { HttpClientModule } from '@angular/common/http';

HttpClientModule开始发挥作用。您不再需要response.json()。现在HttpClient.get()返回一个类型为HttpResponse的Observable,而不仅仅是JSON数据。 See docs。 (的 vto.service.ts

移除,

.map(response => response.json())

然后你有,

constructor(private http: HttpClient) { }

public getVtos(state: DataSourceRequestState): Observable<DataResult> {
  ...
  return this.http
          .get(`${this.vtoUrl}?${queryStr}`)
          .map(({ data, total/*, aggregateResults*/ }) =>
            (<GridDataResult>{
              data: hasGroups ? translateDataSourceResultGroups(data) : data,
              total: total,
              translateAggregateResults(aggregateResults)
            }))
}

答案 1 :(得分:0)

分享对我有用的东西。正如Luillyfe所说,Http现已被弃用,因此将使用HttpClient。返回的响应已经在Json中,因此不再需要使用.Json方法。

constructor(private http: HttpClient) { }
public getVtos(state: DataSourceRequestState): Observable<DataResult> {
    const queryStr = `${toDataSourceRequestString(state)}`; //serialize the state
    const hasGroups = state.group && state.group.length;
    return this.http
        .get(`${this.vtoUrl}?${queryStr}`) //send the state to the server
        .pipe(
        map(<DataResult>({ Data, Total/*, aggregateResults*/ }) => {// process the response
            console.log(Data);
            return (<GridDataResult>{

                data: hasGroups ? translateDataSourceResultGroups(Data) : Data.map(item => {
                    item.ReportDate = new Date(item.ReportDate); // convert to actual JavaScript date object
                    return item;
                }),
                total: Total

            })
        })
        )
}