Angular 6 - What my doing wrong to get Data from observable?

Question

first of all, I followed this example: Heroes as reference. The only difference is the API method, that in my case is post instead of get;

I have this Interface:

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

In service I have the method:

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

the property contasMae definition on component is:

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

(IContasMae is the interface above)

On component, the method is called like this:

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

The console.log of Observable shows:

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

But, the console.log of this.contasMae shows:

Resultado: undefined

What is wrong? How can I get the result in this.contasMae?

Someone could help?

Thanks in advance.

Answer 1

It depends on what you're trying to do with this.contasMae.

I assume, since this is in a component you're trying to display this in a template. If that's the case you can simply have:

<div>{{ contasMae | async }}</div>

async is an Angular pipe that handles asynchronous data in your views.

To iterate over the list in your view:

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

Remember that Observables are asynchronous so in your example, what's happening is that your console.log() is executing before the Observable has resolved an emitted value.

You can see some examples of the async pipe here: https://angular.io/api/common/AsyncPipe

If you're planning on using the value of this.contasMae inside of your component class then one way to do that is to wrap any logic using the instance variable inside of a method on your component class.

For example:

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

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

In the above case, you know that this.contasMae will not be accessed until after a value emitted from your observable has resolved and assigned the result to this.contasMae.