Question

我有.Net 4.6.2 VS 2017 Mvc应用程序，使用Angular 5，＆＃34; rxjs＆＃34;：＆＃34; ^ 5.5.10＆＃34;

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

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

Answer 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) })) }

Answer 2

分享对我有用的东西。正如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

            })
        })
        )
}

Angular 5＆＃34;地图未定义＆＃34;

2 个答案: