Angular 6 - 从 observable 获取数据我做错了啥？

Posted 2023-03-13

【中文标题】Angular 6 - 从 observable 获取数据我做错了啥？

【英文标题】：Angular 6 - What my doing wrong to get Data from observable?Angular 6 - 从 observable 获取数据我做错了什么？

【发布时间】：2019-03-31 19:08:54

【问题描述】：

首先，我按照这个例子：Heroes 作为参考。唯一的区别 是 API 方法，在我的例子中是 post 而不是 get；

我有这个界面：

export interface IContasMae 
codEstab: string;
codProduto: string;
desContaMae: string;
codRep: number;
numQuantidade: number;
numValVenda: number;
numValMedio: number;

在服务中我有方法：

  getContasMae() : Observable<IContasMae[]> 
    if (this.getUser())    
      return this.http.post<IContasMae[]>(`$environment.api_url/getContasMae`,''); 
    
  

组件的contasMae属性定义为：

export class PanelDashboardComponent implements OnInit 
  public contasMae: IContasMae[];

（IContasMae就是上面的接口）

在组件上，方法是这样调用的：

this.service.getContasMae().subscribe(contasMae => 
  
    console.log('Observable:',contasMae);
    this.contasMae = contasMae;
  );
console.log('Resultado:',this.contasMae);
 

Observable的console.log显示：

Observable: contasMae: Array(10)
contasMae: Array(10)
0: codEstab: "001", codProduto: "PRODUCT 1", desContaMae: "Account 1", codRep: "0", numQuantidade: "70302.8", …
1: codEstab: "001", codProduto: "PRODUCT 1", desContaMae: "Account 2", codRep: "0", numQuantidade: "391937.15", …
2: codEstab: "001", codProduto: "PRODUCT 1", desContaMae: "Account 3", codRep: "0", numQuantidade: "1638", …
3: codEstab: "001", codProduto: "PRODUCT 1", desContaMae: "Account 4", codRep: "0", numQuantidade: "3795", …
4: codEstab: "001", codProduto: "PRODUCT 2", desContaMae: "Account 5", codRep: "0", numQuantidade: "320000", …
5: codEstab: "001", codProduto: "PRODUCT 2", desContaMae: "Account 6", codRep: "0", numQuantidade: "2140", …
6: codEstab: "001", codProduto: "PRODUCT 2", desContaMae: "Account 7", codRep: "0", numQuantidade: "660", …
7: codEstab: "001", codProduto: "PRODUCT 2", desContaMae: "Account 8", codRep: "0", numQuantidade: "128616", …
8: codEstab: "001", codProduto: "PRODUCT 2", desContaMae: "Account 9", codRep: "0", numQuantidade: "128540", …
9: codEstab: "001", codProduto: "PRODUCT 2", desContaMae: "Account 10", codRep: "0", numQuantidade: "2056", …
length: 10
__proto__: Array(0)
__proto__: Object

但是，this.contasMae的console.log显示：

Resultado: undefined

怎么了？如何在 this.contasMae 中获得结果？

有人可以帮忙吗？

提前致谢。

【问题讨论】：

我认为你误解了 Observables 的工作原理。如果你告诉我你想用this.contasMae 的值做什么，我可以给你一个很好的详细答案。

非常感谢您的帮助，丹。我需要获取要在模板中使用的数据（例如 ngFor），还需要汇总产品和总收入，获取图表标签和值的键。我需要处理数组（forEach、Sort 等）。

【参考方案1】：

这取决于你想用this.contasMae做什么。

我假设，因为这是在您尝试在模板中显示的组件中。如果是这种情况，您可以简单地拥有：

<div> contasMae | async </div>

async 是一个 Angular 管道，用于处理视图中的异步数据。

在您的视图中迭代列表：

<li *ngFor="let item of contasMae | async" [value]="item">item</li>

请记住，Observables 是异步的，因此在您的示例中，发生的情况是您的 console.log() 在 Observable 解析发出的值之前执行。

您可以在此处查看async 管道的一些示例：https://angular.io/api/common/AsyncPipe

如果您打算在组件类中使用 this.contasMae 的值，那么一种方法是使用组件类的方法中的实例变量来包装任何逻辑。

例如：

public ngOnInit() 
    this.service.getContasMae().subscribe(contasMae => 
    
        console.log('Observable:',contasMae);
        this.contasMae = contasMae;
        doSomething();
    );


public doSomething() 
    console.log('Resultado:',this.contasMae);

在上述情况下，您知道 this.contasMae 将不会被访问，直到您的 observable 发出的值已解析并将结果分配给 this.contasMae。

【讨论】：

哇！惊人的！ - 我必须在 doSomething 中分配 this.contasMae 吗？我如何（以及何时）永久获取 this.contasMae 数据？请耐心等待，我只是一个初学者。

不用担心 :) 这是假设 contasMae 是该类的公共实例成员。所以它会在你的构造函数之上定义。由于数据是异步的，如果不处理这个事实，您永远无法使用它。

哥们，你是大满！你救了我的命。非常非常感谢。

@HeberPaesFomin 没问题伙计 :) 如果这是您正在寻找的答案，您介意将其设为可接受的答案吗？谢谢！

嘿，女士们，先生们。我可以看到您从答案中受益，但您没有投赞成票。请这样做。我做到了。