Angular 2 Observable subscribe params und services Fehler

Question

Ich habe ein Problem über Observable, die beide Route Params und Services abonnieren (meiner Meinung nach). Ich sehe Fehler auf den Ansichten

Kann nicht Eigentum ‚Beiträge‘ undefinierter

lesen, obwohl ich die Beiträge Daten anmelden können. Bitte helfen Sie mir, dieses Problem zu lösen. Danke im Voraus!

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

Die Ansicht wird, bevor irgendeine der Wert eingeleitet werden wird von asynchronen Observablen zurückgegeben. In Ihrem Fall, wenn Ihr CategoryComponent angezündet ist, ist categoryPostsundefined. Und genau zu diesem Zeitpunkt fordert Ihre Ansicht auch die Daten dieser undefined-Eigenschaft zum Rendern an.

Lösung: nur Sie müssen diese DOMs, um sicherzustellen, dass categoryPosts Ihr erfordern berücksichtigt werden, wenn Sie etwas zu zeigen haben:

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