Angular 2 Wie kann ich meine Variable async auf Werte warten lassen?

Question

Ich habe diesen Fehler:

TypeError: Cannot read property 'length' of undefined at PaginationComponent.ngOnChanges (pagination.component.ts:38)

Das ist mein PaginationComponent:

@Input() items = []; 
@Input('page-size') pageSize; 
@Output('page-changed') pageChanged = new EventEmitter(); 
pages: any[]; 
currentPage; 
public numberofpages = 10; 
ngOnChanges(){ 
    this.currentPage = 1; 
    var pagesCount = this.items.length/this.pageSize; 
    this.pages = []; 
    for (var i = 1; i <= pagesCount; i++) 
     this.pages.push(i); 
} 

Dieses, wie ich es in einer anderen Komponente bin mit AboutUsComponent: sind

<pagination [items]="posts" [page-size]="pageSize" (page-changed)="onPageChanged($event)"></pagination> 

die Pfosten geladen in AboutUsComponent:

private loadPosts(){ 
    this.postsLoading = true; 
    this._aboutusService.getPosts().subscribe( 
     posts => {this.posts = posts; 
        this.pagedPosts = this.getPostsInPage(1)}, 
     null, 
     () => { this.postsLoading = false}); 
} 

Wie ich es verstehe passiert wegen .subscribe() asynchronen Laden von Beiträgen und @Input() items = []; könnte geladen werden, bevor Beiträge kommen. Wie kann ich es erwarten oder was über Lösung vorschlagen? Danke.

Answer 1

Sie können den Parameter der ngChanges-Methode überprüfen, um sicherzustellen, dass die Änderungen items entsprechen. Auf diese Weise würden Sie sicher sein, dass der items Eingang gesetzt:

ngOnChanges(changes: SimpleChanges){ 
    if (changes['items']) { // <---- 
    this.currentPage = 1; 
    var pagesCount = this.items.length/this.pageSize; 
    this.pages = []; 
    for (var i = 1; i <= pagesCount; i++) 
     this.pages.push(i); 
    } 
    } 
} 

Die ngOnChanges Methode für jede Änderung aufgerufen wird, sogar auf dem pageSize Eingang ...