サーバからhtmlを取り出し、角をつけて表示

Question

私はRESTサービスからHTMLを取得し、角度（4.3）で表示しようとしています。私はサービスが呼び出され、正しい内容を返すのを見ることができます。しかし、これを使った角度成分は実際にはコンテンツを実際に受け取っていないようです。私は何を逃したのですか？

具体的には、console.log(html)（下の2番目のコードサンプル）は常にnullを出力します。

私はのように見える角度サービスがあります。

export class SlidePreviewComponent implements OnInit { 

    @Input() slide: string;  /* Identifier for the slide */ 
    @Input() deck: string; 
    slideHtml: string; 


    constructor(private slideService: SlidesService) { 

     } 

    ngOnInit(): void { 
     this.slideService.getSlide(this.deck, this.slide) 
      .subscribe(html => this.setSlideHtml(html)); 
    } 

    setSlideHtml(html: string) { 
     this.slideHtml = html; 
     console.log(html); 
    } 
} 

Answer 1

新しいHttpClientクラスはJSONレスポンスを返すようにget()方法を想定しています。これは、コンポーネントによって使用されている

@Injectable() 
export class SlidesService { 

    private requestUrl: string; 

    constructor(
     @Inject(AppConfig) private config: AppConfig, 
     @Inject(HttpClient) private http: HttpClient) { 
     this.requestUrl = this.config.restRoot + listSlidesUrl; 
    } 


    getSlide(deck: string, slide: string): Observable<string> { 

     const headers: HttpHeaders = new HttpHeaders({'Accept': 'text/html'}); 
     const thisUrl: string = this.requestUrl + '/' + deck + '/' + slide; 

     return this.http.get<string>(thisUrl, { headers: headers }); 
    } 
} 

を。テキスト（HTML）を期待していた場合、それはリクエストのオプションでnecessary to specify itです：

this.http.get(thisUrl, { headers: headers, responseType: 'text' }); 

特別Acceptヘッダは、不要です。

Answer 2

こんにちはあなたはサービス

getSlide(deck: string, slide: string){ 
    const thisUrl: string = this.requestUrl + '/' + deck + '/' + slide; 
    return this.http 
     .get(url ,{ headers: headers, responseType: 'text' }) 
     .toPromise() 
     .then(resp => resp.text()) 
     .catch(error=>console.log(error)) 
} 

でこれを試してみて、あなたのコンポーネント

ngOnInit(): void { 
     this.slideService.getSlide(this.deck, this.slide) 
      .subscribe(html => this.setSlideHtml(html)); 
    } 
setSlideHtml(html) { 
     this.slideHtml = html; 
     console.log(html); 
    } 

をテンプレートにどのようにサービスを見ている

<div id="scroll" [innerHTML]="slideHtml"></div>