Angular 2，变量未在服务内部更新 [英] Angular 2, variable is not updating inside service

问题描述

我正在尝试提供api服务并将数据分配给变量，但是该变量未更新，并且在尝试登录API服务后变得未定义.

Im trying to make a api service and assign the data to a variable, but, the variable is not updating, and getting as undefined when I try to log after API service.

import {Component,Input,Output,EventEmitter} from 'angular2/core';
import {NgClass,NgFor} from 'angular2/common';
import {Observable} from 'rxjs/Observable';
import {ChangeDetectionStrategy} from 'angular2/core';
import {ValuesPipe} from '../pipes/values';
import {ApiRequestService, Query} from '../services/apiRequestService';




@Component({
selector: 'browsePCLatestRelease',  // <home></home>
directives: [NgClass,NgFor],
changeDetection: ChangeDetectionStrategy.OnPush,
pipes: [ ValuesPipe ],
styles: [ require('./browsePCLatestRelease.less') ],
template: require('./browsePCLatestRelease.html')
})
export class browsePCLatestRelease {

public arrayOfKeys;
pcLatestrelease:Array<any> ;
query: Query;

constructor(private _apiService: ApiRequestService) {
}

ngOnInit() {

this.query = this._apiService.createQuery('browsePC.getIssue');
this.query.params({
  volume: '60',
  issue: '50'
});
this._apiService.execute(this.query)
  .subscribe(

    data => this.pcLatestrelease=data,
    error => console.log(error),
    () => console.log('pcLatestrelease retrived')

  );

console.log('this.pcLatestrelease');
console.log(this.pcLatestrelease);  // logged as undefined

}


}

HTML

<div *ngFor = "#thisRelease of pcLatestrelease">
        {{thisRelease.title}}
</div>

有人可以帮我吗，谢谢.

Can someone help me, Thanks in advance.

推荐答案

该代码未按函数中的列出逐行执行

The code is not executed line-by-line as listed in your function

export class browsePCLatestRelease {

  ...

  ngOnInit() {

    this.query = this._apiService.createQuery('browsePC.getIssue');
    this.query.params({
      volume: '60',
      issue: '50'
    });
    this._apiService.execute(this.query)
    .subscribe(
  // here you pass a function to subscribe of an observable
  // the function gets called when the data arrives (from the server)
      data => this.pcLatestrelease=data,
      error => console.log(error),
      () => console.log('pcLatestrelease retrived')
    );

  // this code is executed immediately after the function (callback) 
  // was passed to subscribe, but the function wasn't yet executed
    console.log('this.pcLatestrelease');
    console.log(this.pcLatestrelease);  // logged as undefined
  }
}

然后数据最终到达

data => this.pcLatestrelease=data,

执行

并将值分配给this.pcLatestrelease

如果您希望在数据到达后执行代码，请使用

If you want your code to be executed after the data arrived use

export class browsePCLatestRelease {

  ...

  ngOnInit() {

    this.query = this._apiService.createQuery('browsePC.getIssue');
    this.query.params({
      volume: '60',
      issue: '50'
    });
    this._apiService.execute(this.query)
    .subscribe(
  // here you pass a function to subscribe of an observable
  // the function gets called when the data arrives (from the server)
      data => {
         this.pcLatestrelease=data;
         console.log('this.pcLatestrelease');
         console.log(this.pcLatestrelease);  // logged as undefined
      },
      error => console.log(error),
      () => console.log('pcLatestrelease retrived')
    );

  }
}

更新

import {Component,Input,Output,EventEmitter, NgZone} from 'angular2/core';

...

export class browsePCLatestRelease {

  constructor(private _apiService: ApiRequestService, private _zone.NgZone) {
  }    

  ...

  ngOnInit() {

    this.query = this._apiService.createQuery('browsePC.getIssue');
    this.query.params({
      volume: '60',
      issue: '50'
    });
    this._apiService.execute(this.query)
    .subscribe(
  // here you pass a function to subscribe of an observable
  // the function gets called when the data arrives (from the server)
      data => {
         this.zone.run(() => {
           this.pcLatestrelease=data;
           console.log('this.pcLatestrelease');
           console.log(this.pcLatestrelease);  // logged as undefined
         });
      },
      error => console.log(error),
      () => console.log('pcLatestrelease retrived')
    );

  }
}

这篇关于Angular 2，变量未在服务内部更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！