时间戳

首页 > 解决方案 > 从订阅对象分配多个值

angular - 从订阅对象分配多个值

问题描述

我有一个带有两个简单数字的对象，然后是一个对象列表：

export class Lineup {
  players: Player[];
  fantasypoints: number;
  salary: number;

  constructor(values: Object = {}) {
    Object.assign(this, values);
  }
}

我点击了一个服务，用一个帖子填充它（我添加了一些玩家并从中取回了一个阵容：

public postLineup(players): Observable < Lineup > {
  return this.http.post <Lineup>(`${API_URL}/optimize`, JSON.stringify(players));
}

这个 POST 可以很好地返回数据，据我所知，它将正确地将 JSON 填充到 Lineup 对象中。

但是，在我的 app.component 中，当我尝试将这些值分配给组件变量时，我可以实际使用这些数据。我似乎无法完成任务。

onClickOptimize() {
  this.apiService.postLineup(this.playerSource.data)
    .subscribe(lineupreturned => {
      this.lineupSource = new MatTableDataSource(lineupreturned.players);
      this.salary = lineupreturned.salary;
      this.fantasypoints = lineupreturned.fantasypoints;
      this.displaylineup = true;
      console.log("component output:"), console.log(lineupreturned);
    });
}

console.logof实际上显示lineupreturned一个对象并且它被填充。但是，如果您要记录this.salary或任何其他变量，它会返回为undefined. 我一生都无法理解为什么这些变量都没有被填充。

编辑：使用来自 console.log 的 lineupreturned 变量结果：

null: Array(1) [Object]
length: 1
__proto__: Array(0) [, …]
0: Object {fantasypoints: 324.15, players: Array(8), salary: 48800}
fantasypoints: 324.15
players: Array(8) [Object, Object, Object, …]
length: 8
__proto__: Array(0) [, …]
0: Object {_max_exposure: null, _projected_ownership: null, first_name: "Ray", …}
1: Object {_max_exposure: null, _projected_ownership: null, first_name: "Clearlove", …}
2: Object {_max_exposure: null, _projected_ownership: null, first_name: "Scout", …}
3: Object {_max_exposure: null, _projected_ownership: null, first_name: "Hope", …}
4: Object {_max_exposure: null, _projected_ownership: null, first_name: "Meiko", …}
5: Object {_max_exposure: null, _projected_ownership: null, first_name: "SnowFlower", …}
6: Object {_max_exposure: null, _projected_ownership: null, first_name: "Arce", …}
7: Object {_max_exposure: null, _projected_ownership: null, first_name: "Infinity eSports", …}
salary: 48800
__proto__: Object {constructor: , __defineGetter__: , __defineSetter__: , …}

标签： angulartypescriptangular6

解决方案

我注意到的几个问题：

在这里，您正在做JSON.stringify(players)这并不是真正需要的。

public postLineup(players): Observable < Lineup > {
  return this.http.post <Lineup>(`${API_URL}/optimize`, JSON.stringify(players));
}

所以这应该是：

public postLineup(players): Observable < Lineup > {
  return this.http.post <Lineup>(`${API_URL}/optimize`, players);
}

另一件事是，

onClickOptimize() {
  this.apiService.postLineup(this.playerSource.data)
    .subscribe(lineupreturned => {
      const actualResponse = lineupreturned[0];
      this.lineupSource = new MatTableDataSource(actualResponse.players);
      this.salary = actualResponse.salary;
      this.fantasypoints = actualResponse.fantasypoints;
      this.displaylineup = true;
      console.log("component output:"), console.log(lineupreturned);
    });
}

在这里，您使用new MatTableDataSource(lineupreturned.players)的可能会引发错误。

因此，您可能希望在此处放置一个断点以查看 的实际值，lineupreturned并在控制台上检查是否有任何错误。

更新

从您的console.log输出看来，实际响应是一个数组，其中只有一个对象。该对象将包含fantasypoints、players和 等内容salary。

因此，在我更新时更改您的订阅代码。

推荐阅读