將JQuery AJAX調用轉換爲Angular 2服務

我正在將JQuery用於HTTP請求到.NET控制器（我正在使用.NET MVC 4.5.2），但現在開始使用Angular 2，所以我想要處理這些相反，JQuery AJAX調用Angular 2。下面是我用之前的JQuery的，它的工作就像我想：將JQuery AJAX調用轉換爲Angular 2服務

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

如何設置我的角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數據，然後使用角度來分析數據，並將其格式化成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的字符串。

UPDATE

我升級打字稿和app.module.ts刪除我InMemoryWebApiModule和InMemoryDataService進口，這導致新的錯誤。錯誤現在說：EXCEPTION: Unexpected token < in JSON at position 4

這是因爲我們將我的HTML數據轉換爲JSON？我如何才能像我的JQuery一樣返回HTML？

來源

2016-10-11 Brett

你可以添加代碼，你調用getVarieties（）函數？ – Sefa

我編輯我的帖子，包括 – Brett

你可以做這樣的事情：

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不由於渲染模板時請求尚未完成，因此進行渲染。一個可能的解決方案是將一個ngIf添加到div標籤。

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

來源

2016-10-11 19:41:14

我收到錯誤，當我建立說： 'res'隱含有'any'類型。 – Brett

I chang編輯水庫到（水庫：任何），似乎已經照顧，但現在我有一個錯誤，說：找不到名稱'Observable' – Brett

導入它。我在示例中修復了它。 –

您必須訂閱才能真正發送請求並閱讀回覆。

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'); 
    }

來源

2016-10-11 19:44:37 Sefa

我是否需要導入任何可以使用該代碼的東西？我得到構建錯誤。例如：「無法找到名稱」響應「」和「屬性'地圖'不存在類型'Observable ' – Brett

請參閱此獲取完整的示例http://stackoverflow.com/documentation/angular2/7343/crud -in-angular2 -with-restful-api＃t = 201610111953558637191 – Sefa

我導入了我缺少的內容，並且構建錯誤消失了，但在瀏覽器控制檯中仍然出現此錯誤：EXCEPTION：未捕獲（承諾）： TypeError：無法讀取未定義的屬性'0' – Brett

「無法找到名爲‘響應’」和「地產‘地圖’上不型‘可觀測’存在我有同樣的問題，但它不是一個問題，它顯示錯誤的.map，但它的工作。

來源

2016-10-13 09:31:07

將JQuery AJAX調用轉換爲Angular 2服務

回答

相關問題