Question

我从我的组件调用一个服务，它返回json数据，这是我的代码

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);
    }) 
  }
}

这里我的服务组件中的notifyParent = new EventEmitter（）。它在接收数据时会发出事件。

问题是：

1）isLoading始终显示为true。即使在observables将其值更新为false之后也是如此。

2）我无法显示返回的JSON数据。因为视图在我收到数据之前已经呈现。

我使用事件发射器而不是http请求是有原因的。我正在为我的学校项目构建这个应用程序，它必须在localhost上运行，由于CORS问题，它无法提出http请求。

Answer 1

我认为您没有得到回复，请尝试检查控制台错误，错误：

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);
  }) 
}

现在，如果您收到错误，请检查您的服务。

Answer 2

问题在于您的服务由于某种原因打破了角度区域，所以当您订阅时，更改检测不会运行。

我们可以手动强制进行更改检测。导入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();
    }) 
  }
}

如何在数据以角度2到达时更改VIEW？

2 个答案: