Question

我试图创建一个api服务并将数据分配给一个变量，但是，该变量没有更新，当我尝试在API服务之后进行日志记录时，它变为未定义。

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>

有人可以帮助我，提前谢谢。

Answer 1

代码不是按照函数

中列出的逐行执行的

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

如果您希望在数据到达后执行代码

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，变量不在服务内部更新

1 个答案: