将 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 的示例。我的控制器已经 return 是我需要的 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 那样 return 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

"Cannot find name 'Response'" 和“属性 'map' 在类型 'Observable' 上不存在我有同样的问题但这不是问题，它显示错误 .map 但它的工作.

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

Convert JQuery AJAX call to Angular 2 service

asp.net-mvc

angular

angular2-services