ローカルデータで動作するAngular2ライフサイクルフック

Question

私の問題を示す次の小さなプログラムを作成しました。ローカルデータを使用してdivを作成すると、私のlargestHeightメソッドは正常に実行されますが、APIデータを使用すると、あまりにも早く実行され、データが挿入される前に終了します。

これら2つのコンポーネントはプログラム全体です。私は、主要なコンポーネントであるHTMLテンプレートに、2つのデータ型の違いを見るために変更する必要のある変数をマークしました。 （私はこれらの2つのコードを6時間に亘って作成しようとしましたが、まあまっすぐになるはずですが、ついには動作しませんでした）：

手助けしようとしているため、誰にコンポーネント

import { Component, OnInit, ElementRef, QueryList, ViewChildren, ViewChild, Renderer, AfterViewInit } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/Rx'; 

export interface IHeadlines { 
    userId: number; 
    id: string; 
    title: string;} 

export interface GroupPosts { 
    title: string; 
    posts: IHeadlines[];} 

@Component({ 
    selector: 'test-main3', 
    template: ` 
    <div id="main_container" #main_container> 
     <div id="one" #containers> 
      <test-child3 [data]="localdata"></test-child3> <!-- Change "localdata" to "apidata" to see the difference --> 
     </div> 
     <div id="two" #containers> 
      ***** <br> 
      ***** 
     </div> 
    </div> 
     `, 
styles: [` 
    #main_container { 
      background-color: #cc66ff; 
      height:100px; 
     } 
    #one { 
     background-color: #669966; 
     position:absolute; 
     margin-left: 33.5%; 
    } 
    #two { 
     background-color: #ff99cc; 
     position:absolute; 
     margin-left: 5%; 
    } 
    `], 
}) 
export class Main3Component implements OnInit { 

    @ViewChildren('containers', {read: ElementRef}) 
    public divs: QueryList<ElementRef> 
    @ViewChild('main_container') 
    public mainContainerRef: ElementRef; 
    apidata: IHeadlines[];  

    localdata = [ 
    { id: 'text1', title: 'up' }, 
    { id: 'text2', title: 'down' }, 
    { id: 'text3', title: 'down' }, 
    { id: 'text4', title: 'up' }, 
    { id: 'text5', title: 'down' }, 
    { id: 'text6', title: 'up' }, 
    { id: 'text7', title: 'up' }, 
    { id: 'text8', title: 'down' }, 
    { id: 'text9', title: 'up' }, 
    { id: 'text10', title: 'down' } 
]; 

    constructor(private _http: Http, private _renderer:Renderer) { } 

    getPosts() { 
    const url = 'https://jsonplaceholder.typicode.com/albums'; 
    return this._http.get(url) 
     .map(x => x.json()); 
    } 

    ngOnInit() { 
     this.getPosts() 
      .subscribe(x => this.apidata = x); 
    } 

    ngAfterViewInit() { 
     this.largestHeight(); 
    } 

    largestHeight() { 
    console.log("Parent ngAfterViewInit"); 
    let largestHeight = this.divs.reduce((topHeight, divValue) => { 
     let currentDiv = divValue.nativeElement.getBoundingClientRect(); 
     return (currentDiv.height > topHeight ? currentDiv.height : topHeight); 
    }, 0); 
    this._renderer.setElementStyle(this.mainContainerRef.nativeElement, 'height', largestHeight + 40 + 'px'); 
    this.divs.forEach((names) => { 
    this._renderer.setElementStyle(names.nativeElement, 'height', largestHeight + 'px'); 
    console.log(largestHeight); 
    }); 
    } 

} 

子コンポーネント

import { Component, OnInit, Input, SimpleChanges } from '@angular/core'; 
import { IHeadlines, GroupPosts } from '../main3.component'; 

@Component({ 
    selector: 'test-child3', 
    template: ` 
     <div *ngFor="let headlines of data">  
      {{headlines.id}} {{headlines.title}} <br> 
     </div> 
     `, 
    styles: ['div {color: white;}'] 
}) 
export class Child3Component implements OnInit { 

@Input() data: IHeadlines[]; 
groupPosts: GroupPosts[]; 

    constructor() { } 

    ngOnInit() { 
    } 

ngOnChanges(changes: SimpleChanges) { 
     if (changes['data']) { 
      this.groupPosts = this.groupByCategory(this.data); 
     } 
    } 

groupByCategory(data: IHeadlines[]): GroupPosts[] { 
     if (!data) return 
     const categories = new Set(data.map(x => x.title)); 
       const result = Array.from(categories).map(x => ({ 
      title: x, 
      posts: data.filter(post => post.title === x) 
     })); 
     return result; 
    }  

} 

ありがとう！

Answer 1

要素の描画後にlargestHeight関数を呼び出す必要があると思います。

あなたがこの方法で回避することができます。

import 'rxjs/add/operator/first'; 
... 
constructor(private ngZone: NgZone) { } 

ngOnInit() { 
    this.getPosts() 
    .subscribe(x => { 
     this.apidata = x; 
     this.ngZone.onMicrotaskEmpty.first().subscribe(() => { 
      this.largestHeight(); 
     }); 
     }); 
} 

Plunker Example