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

Question

首先，我按照这个例子：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 中获得结果？

有人可以帮忙吗？

提前致谢。

Answer 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。