Angular 5“地图未定义”
Angular 5“地图未定义”
提问于 2018-05-12 04:10:43
我有.Net 4.6.2 VS 2017 Mvc应用程序，使用Angular 5，"rxjs"："^5.5.10“
我正在尝试通过控制器获取Kendo UI网格的数据。控制器正在返回我可以看到的数据，但是在代码.map(response => 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)
}))
}
}对GetVots的HomeController调用
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
Stack Overflow用户
发布于 2018-05-12 12:19:22
这里有几个观察，这个模块是不推荐使用的。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的可观察对象，而不仅仅是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)
}))
}Stack Overflow用户
发布于 2018-05-14 22:18:02
分享对我有用的东西。正如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
})
})
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50299591
复制相关文章
相似问题
腾讯云开发者
