JQueryのAJAX呼び出しをAngular 2サービスに変換する

Question

.NETコントローラ（.NET MVC 4.5.2を使用しています）へのHTTP要求に対してJQueryを使用していましたが、現在はAngular 2を使用し始めています。 JQuery AJAXはAngular 2を代わりに呼び出します。ここではjQueryのは私が望んでいただけのように働いている、以前に使用していました：

$.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を解析する必要はありません。私がJQueryを使用していたときと同じようにhttpリクエストを取得するにはどうすればよいですか？

テスト目的のために、return this.http.get(this.url);をreturn '<h1>test data</h1>';に変更し、正しく表示することができたので、唯一の問題はhttp要求であることがわかりました。 EDIT

：ここに は、私が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にバインドする方法である：私は代わりの{{varietyListSelling}}は、私は必要があるためという使用

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

HTMLに変換される文字列

UPDATE

私は活字体をアップグレードして、新しいエラーが生じている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がありませんテンプレートがレンダリングされているときに要求が完了していないためです。このための可能な解決策は、ngIfをdivタグに追加することです。

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

ようになり、私は同じ問題を持っていますが、そうではありません問題が発生しましたが、エラー.mapが表示されていますが、その作業は