HTTPからデータを抽出します。

私はAngular 2を初めて使用しましたが、URLからデータを抽出しようとしています。マイコンポーネントコードがある：HTTPからデータを抽出します。

import 'rxjs/add/operator/switchMap'; 
import { Component, OnInit }  from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 
import {ArticleService} from "../services/ArticleService"; 

@Component({ 
    selector: 'app-article', 
    templateUrl: './article.component.html', 
    styleUrls: ['./article.component.css'], 
    providers: [ArticleService] 

}) 
export class ArticleComponent implements OnInit { 

    article: JSON; 

    constructor(
     private ArticleService: ArticleService, 
     private route: ActivatedRoute 
    ) {} 

    ngOnInit(): void { 
     this.route.params 
      .switchMap((params: Params) => this.ArticleService.getArticle(+params['id'])) 
      .subscribe(art => { 
       this.article = art; 
      }); 

    } 

}

マイArticle.service.tsである：外使用する場合

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

@Injectable() 
export class ArticleService { 
    private headers = new Headers({'Content-Type': 'application/json'}); 
    private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; 

    constructor(private http: Http) { 
    } 

    getArticle(id: number) { 
     const url = `${this.apiUrl}/${id}`; 
     return this.http.get(url) 
      .map(response => response.json()); 
    } 
}

Iは.subscribe内部console.log(this.article)を使用する場合（）ブロックは、未定義オブジェクトが、ディスプレイが表示されので、私は自分のHTMLテンプレートでデータを使用することはできません。

出典

2017-01-17 amartinez

でarticleに依存部分をラップを使用しますか？おそらくデータが利用可能になる前に「外部」が実行されている可能性があります。データは 'subscribe（...）'に渡されたコールバックが呼び出されたときにのみ利用可能になります。 –

「this.router.params」の後ろを意味します。申し訳ありませんが理解できない場合。このデータをHTMLテンプレートに表示するには、どうすればよいですか？ – amartinez

データが利用可能になる前に 'this.router.params'が実行された後。データが利用可能になる前にAngularがバインディングを解決すると、エラーメッセージを避けるために、 'article？.name'のように'？.'を使いたいと思うでしょう。 –

JSON型に割り当てるのではなく、記事のインターフェイスを作成することを検討する必要があります。私はそれがタイプのビルドであることに気づいていません。

出典

2017-01-17 18:14:25 bob

あなたのコメントもありがとう、私はそれをインターフェース – amartinez

は、安全航行（エルビス）オペレータ

<div>{{article?.name}}</div>

またはあなたが "外" とは何を意味するか*ngIf

<div *ngIf="article"> 
    <div>{{article.name}}</div> 
</div>

出典

2017-01-17 18:16:35

に変更しました – amartinez

HTTPからデータを抽出します。

答えて

関連する問題