角度2観測可能なサブスクリプションのパラメータとサービスのエラー

Question

Observableに関する問題が発生しましたが、これはルートパラメータとサービスの両方を購読しています（私の意見では）。私はポストのデータをログに記録することができますが、未定義

のプロパティ「ポスト」を読み込めませんビュー

上のエラーを見ています。この問題を解決するのを手伝ってください。前もって感謝します！

category.component.ts

@Component({ 
    // moduleId: module.id, 
    selector: 'category', 
    templateUrl: 'category.component.html', 
    providers: [HTTP_PROVIDERS], 
    directives: [ROUTER_DIRECTIVES] 
}) 
export class CategoryComponent implements OnInit { 
    private category: string; 
    private type: string; 

    private paramsSub: any; 

    categoryPosts: CategoryPosts; 

    constructor(
     private route: ActivatedRoute, 
     private categoryService: CategoryService 
    ) {} 

    ngOnInit() { 
     this.paramsSub = this.route.params.subscribe(params => { 
      this.category = params['category']; 
      this.type = params['type']; 
      this.categoryService.getPostInCategory(this.category, this.type) 
       .subscribe((categoryPosts: CategoryPosts) => { 
        this.categoryPosts = categoryPosts; 
        console.log(this.categoryPosts.posts) // can print the data 
       }, 
       error => { 
        console.log(error); 
       }); 
     }); 
    } 

    // ngOnDestroy(){ 
    // this.paramsSub.unsubscribe(); 
    // } 
} 

category.component.html

<ul> 
    <li *ngFor"let post of categoryPosts.posts | async"> 
    {{ post.title }} 
    {{ post.body }} 
    </li> 
</ul> 

category.services.ts

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


import { CategoryPosts } from './index'; 
import * as global from '../shared/global/globals'; 

@Injectable() 
export class CategoryService { 
    private _baseUrl: string = ''; 

    constructor(private http: Http) { 
     this._baseUrl = global.BASE_URL; 
    } 


    getPostInCategory(category: string, type: string) : Observable<CategoryPosts>{ 
     return this.http.get(this._baseUrl + 'category/' + category + '/' + type) 
      .map((res: Response) => { 
       return res.json(); 
      }) 
      .catch(this.handleError); 
    } 

    private handleError(error: any) { 
    var applicationError = error.headers.get('Application-Error'); 
    var serverError = error.json(); 
    var modelStateErrors: string = ''; 

    if (!serverError.type) { 
     console.log(serverError); 
     for (var key in serverError) { 
     if (serverError[key]) 
      modelStateErrors += serverError[key] + '\n'; 
     } 
    } 

    modelStateErrors = modelStateErrors = '' ? null : modelStateErrors; 

    return Observable.throw(applicationError || modelStateErrors || 'Server error'); 
    } 
} 

Answer 1

ビューは、値のいずれかの前に開始されます非同期オブザーバブルから返されます。あなたの場合、CategoryComponentが発砲された場合、categoryPostsはundefinedです。また、その時点であなたの視点はレンダリングするそのundefinedプロパティのデータも要求します。

ソリューション：あなたのcategoryPostsを必要とするDOMを確認する必要がありますが、あなたが表示する何かを持っているときにのみ考慮されます：

<ul *ngIf="categoryPosts && categoryPosts.posts"> 
    <li *ngFor"let post of categoryPosts.posts"> 
    {{ post.title }} 
    {{ post.body }} 
    </li> 
</ul>