Angular 5中map未定义及非法return语句问题求助

你遇到的两个错误（非法return语句、map is not defined）主要来自Angular Http服务的弃用和rxjs 5.5+操作符使用方式的变化，结合你的代码，我给你一步步的修复方案：

核心问题分析 #

1. 混用废弃的Http和新HttpClient：Angular 5中Http已经被标记为废弃，官方推荐使用HttpClient，它会自动解析JSON响应，不需要手动调用response.json()——这也是你出现“非法return语句”的直接原因之一。
2. rxjs 5.5+操作符升级：rxjs 5.5开始引入了pipeable操作符，虽然还兼容旧的原型链导入（import 'rxjs/add/operator/map'），但结合新的HttpClient，使用pipe包裹操作符的方式更稳定，也能解决“map is not defined”的问题。

具体修复步骤 #

1. 替换Http为HttpClient #

修改你的服务导入和依赖注入：

• 移除@angular/http相关的导入（Http, HttpModule, Headers, Response）
• 只保留@angular/common/http的HttpClient和HttpHeaders
• 构造函数中注入HttpClient而非Http

2. 调整rxjs操作符的使用方式 #

• 导入pipeable的map操作符：import { map } from 'rxjs/operators';
• 将原来的链式map调用改为用pipe包裹的形式

3. 移除多余的response.json()调用 #

因为HttpClient的get方法会自动解析JSON响应，直接返回数据对象，不需要再手动解析。

修改后的完整vto.service.ts代码 #

import { Injectable } from '@angular/core';
import { VTO } from './vto';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { toDataSourceRequestString, translateDataSourceResultGroups, DataResult, DataSourceRequestState } from '@progress/kendo-data-query';
import { map } from 'rxjs/operators'; // 导入pipeable的map
import { GridDataResult } from '@progress/kendo-angular-grid';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class Vtos {
  private vtoUrl = 'http://localhost:63213/Home/GetVtos';
  
  // 注入HttpClient而非Http
  constructor(private http: HttpClient) { }

  public getVtos(state: DataSourceRequestState): Observable<DataResult> {
    const queryStr = `${toDataSourceRequestString(state)}`;
    const hasGroups = state.group && state.group.length;
    
    return this.http
      .get(`${this.vtoUrl}?${queryStr}`)
      // 用pipe包裹map操作符，移除response.json()
      .pipe(
        map(({ data, total }) => ({
          data: hasGroups ? translateDataSourceResultGroups(data) : data,
          total: total
        } as GridDataResult))
      );
  }
}

额外确认点 #

• 你的HomeController代码是没问题的，返回的DataSourceResult格式（包含data和total字段）完全符合Kendo Grid的要求。
• 确保你的Angular模块中已经导入了HttpClientModule（而不是旧的HttpModule），否则HttpClient无法注入。

这样修改后，两个错误应该都会消失，Kendo Grid就能正常获取并渲染数据了。

内容的提问来源于stack exchange，提问作者SilverFish