Angular 2 - http 获取 return 错误的对象

Question

我正在使用@angular/http get 从服务器获取数据，这是我的代码：

private _currentPT: any;
public phongtroDetailChange = new Subject();

layPhongtro(id: number): Promise<any> {
return new Promise((resolve, reject) => {
  this.http
    .get(Constants.apiUrl + 'phongtro/' + id, { headers: Constants.headers })
    .map((resp: Response) => resp.json())
    .subscribe(resp => {
      console.log(resp);
      // if (!resp.result) {
      //   this._currentPT = resp;
      //   this.phongtroDetailChange.next(true);
      //   resolve(resp);
      // } else {
      //   this.handleError('layPhongtro', resp.result);
      //   reject(resp.result);
      // }
    },
    error => this.handleError('layPhongtro', error));
});
}

当我这样注释代码时，resp的属性 "tiencoc" 有正确的值，这意味着它的值为0，这是console.log

的图片

https://i.stack.imgur.com/7oYGW.png

但是当我取消注释时，"tiencoc"的值与属性相同"giatien"，现在它的值是1000000，这是console.log取消注释时的图片

https://i.stack.imgur.com/rGxdI.png

我不知道为什么？请帮助我，非常感谢

P/s: 我用POSTMAN测试过，resp没问题，也就是说"tiencoc"的值为0

Answer 1

这里有一个 fiddle 用于演示：https://jsfiddle.net/Lg6L8n2m/（在查看日志之前猜猜值是什么 :)）

正如我提到的那样，当您 JSON.stringify 响应对象时，您正在打印该值（因为字符串在 js 中是不可变的）。但是如果没有 stringify，console.log 实际上有点工作 "asynchronously"，console.log 打印对象的最新值。

所以您要将 tientoc 更改为代码中 console.log 之后某处的 1000000。 console.log 打印出最新的值。据我所知，它可能在您订阅主题的区块中 phongtroDetailChange

我建议阅读 javascript 中关于此问题的不可变性。

Answer 2

谢谢@echonax，我现在正在阅读 "Immutability in javascript" :)，顺便说一句，我发现在子组件中我已经这样做了：

constructor(private ptService: PhongtroService) {
    this.init();
  }

ngOnInit() {
    this.ptService.phongtroDetailChange.subscribe(result => {
      if(result) {
        this.init();
      }
    });
}
init() {
  this.currentPT = this.ptService.currentPT;
  if(!this.currentPT.tiencoc || this.currentPT.tiencoc === 0) {
     this.currentPT.tiencoc = this.currentPT.giatien;
  }
}

我把ptService的currentPT存入了子组件currentPT(this.currentPT)，然后修改this.currentPT的值

在 ptService 中

private _currentPT: any;
get currentPT(): any{
return this._currentPT;
}
set currentPT(pt) {
this._currentPT = pt;
}

并在上面的 layPhongtro 函数中

this._currentPT = resp;
this.phongtroDetailChange.next(true);

某种程度上，子组件中的代码也会以某种方式影响此响应

Angular 2 - http 获取 return 错误的对象

Angular 2 - http get return wrong object

observable

angularjs

angular-http

angular-promise

angular