角度2にデータが到着したときにVIEWを変更するにはどうすればよいですか？

Question

私は、サービス・コンポーネントでnotifyParent =新しい持つEventEmitter（）ここではここに私のコードは

ある

import {Component,Input,Output} from 'angular2/core'; 
import {PostService} from './post.service'; 
import {OnInit} from 'angular2/core'; 
import {Observable} from 'rxjs/Observable'; 
@Component({ 
selector: 'postC', 
template: ` 
<div> 
{{isLoading}} 
</div> 
`, 
providers: [PostService] 
}) 
export class PostComponent implements OnInit { 
@Input() isLoading = true; 
@Input() y :any; 
@Input() eventsArray; 

constructor(private _postService: PostService){} 
ngOnInit(){ 
    this._postService.getPost("California"); 
    this.y = this._postService.notifyParent 
    .subscribe(item => { 
     this.eventsArray = item.events.event[0]; 
     this.isLoading = false; 
     console.log(this.isLoading); 
    }) 
    } 
} 

、私JSONデータを返す私のコンポーネントからサービスを呼び出しています。データを受け取ったときにイベントを送出します。

問題は次のとおりです。

1）isLoadingは常にtrueを示しています。 observablesがその値をfalseに更新した後も。

2）返されるJSONデータを表示できません。データを受け取る前にビューがレンダリングされているためです。

イベントエミッタを使用していて、http要求ではない理由があります。私は学校のプロジェクトのためにこのアプリケーションを構築していますが、CORSの問題のためにhttpリクエストを行うことができないlocalhost上で実行する必要があります。

Answer 1

問題はサービスが何らかの理由で角度ゾーンを壊しているため、登録時に変更検出が実行されないことです。

変更検出を手動で強制できます。 ChangeDetectorRefをインポートして、detectChanges()を購読してください。

import {Component,Input,Output,ChangeDetectorRef} from 'angular2/core'; 
import {PostService} from './post.service'; 
import {OnInit} from 'angular2/core'; 
import {Observable} from 'rxjs/Observable'; 
@Component({ 
selector: 'postC', 
template: ` 
<div> 
{{isLoading}} 
</div> 
`, 
providers: [PostService] 
}) 
export class PostComponent implements OnInit { 
public isLoading = true; 
public y :any; 
public eventsArray; 

constructor(private _postService: PostService, private cdRef: ChangeDetectorRef){} 
ngOnInit(){ 
    this._postService.getPost("California"); 
    this.y = this._postService.notifyParent 
    .subscribe(item => { 
     this.eventsArray = item.events.event[0]; 
     this.isLoading = false; 
     console.log(this.isLoading); 
     this.cdRef.detectChanges(); 
    }) 
    } 
} 

Answer 2

私はエラーで、コンソールのエラーをチェックしてみてください、あなたが応答を取得されていませんと思う：

errorMessage: any; 

ngOnInit(){ 
    this._postService.getPost("California"); 
    this.y = this._postService.notifyParent 
    .subscribe(item => { 
    this.eventsArray = item.events.event[0]; 
    this.isLoading = false; 
    console.log(this.isLoading); 
    }, 
    error=> { 
    this.errorMessage = <any> error 
    console.log("error: ", this.errorMessage); 
    }) 
} 

今、あなたがエラーを取得している場合は、あなたのサービスをご確認ください。