将 JQuery AJAX 调用转换为 Angular 2 服务

Question

我使用 JQuery 向 .NET 控制器发出 http 请求（我使用的是 .NET MVC 4.5.2），但现在我开始使用 Angular 2，所以我想用 Angular 2 来处理那些 JQuery AJAX 调用。这是我之前使用的 JQuery，它就像我想要的那样工作：

$.get('/Plan/Variety/ListVarietiesInMenuForSelling')
    .done(function(data){
        console.log(data)
    });

如何设置我的 Angular 2 服务来完成同样的事情？我试过下面的代码：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';  

@Injectable()
export class SellingMenuVarietiesService {
    private url = '/Plan/Variety/ListVarietiesInMenuForSelling';  // URL to web api    

    constructor(private http: Http) { }

    getVarieties() {
        return this.http.get(this.url);
    }       
}

不幸的是，这不起作用。相反，我在控制台中收到此错误：

EXCEPTION: Uncaught (in promise): TypeError: Cannot read property '0' of undefined        core.umd.js:3462

我能找到的唯一示例处理 JSON 数据，然后使用 Angular 解析数据并将其格式化为 HTML。我的控制器已经返回了我需要的 HTML，所以我不需要 Angular 来解析 JSON。如何让 http 请求像使用 JQuery 时一样工作？

为了清楚起见，出于测试目的，我将 return this.http.get(this.url); 更改为 return '<h1>test data</h1>'; 并且能够正确显示，所以我知道唯一的问题是 http 请求。

编辑： 这是我调用getVarieties()的代码：

export class SellingMenuVarietiesComponent implements OnInit {   
    varietyListSelling: any;    

    constructor(
        private router: Router,
        private sellingMenuVarietiesService: SellingMenuVarietiesService) { }    

    ngOnInit(): void {        
        this.varietyListSelling = this.sellingMenuVarietiesService.getVarieties();
        console.log('initializing SellingMenuVarietiesComponent');
    }
}

这是我将它绑定到 HTML 的方式：

<div [innerHtml]="varietyListSelling"></div>

我使用它而不是 {{varietyListSelling}}，因为我需要将字符串转换为 HTML。

更新

我升级了 TypeScript 并从 app.module.ts 中删除了我的 InMemoryWebApiModule 和 InMemoryDataService 导入，这导致了一个新错误。错误现在显示：EXCEPTION: Unexpected token < in JSON at position 4

这是因为我们将我的 HTML 数据转换为 JSON 吗？我怎样才能像我的 JQuery 一样返回 HTML？

Answer 1

你可以这样做：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class SellingMenuVarietiesService {
    private url = '/Plan/Variety/ListVarietiesInMenuForSelling';  // URL to web api    

    constructor(private http: Http) { }

    public getVarieties(): Observable<any> {
        return this.http.get(this.url).map(response=>{return response});
    }       
}

然后使用服务：

 this.sellingMenuVarietiesService.getVarieties().subscribe(res => {
    console.log(res);
    });

更新：

您尝试呈现的 html 未呈现，因为在呈现模板时请求尚未完成。一个可能的解决方案是在 div 标签中添加一个 ngIf。

div *ngIf="varietyListSelling" [innerHtml]="varietyListSelling"></div>

Answer 2

您必须订阅才能真正发送请求并阅读响应。

getVarieties() {
        return this.http.get(this.url).map((response: Response) => {
                return response.json();
            },(error) => {
                console.log(error);
                //your want to implement your own error handling here.
            });
    } 

你的组件看起来像

    ngOnInit(): void {        
         this.sellingMenuVarietiesService.getVarieties().subscribe((res) => {
             this.varietyListSelling = res;
         });
        console.log('initializing SellingMenuVarietiesComponent');
    }

Answer 3

“找不到名称 'Response'”和“'Observable' 类型上不存在属性 'map' 我有同样的问题，但这不是问题，它显示错误 .map 但它可以工作。