Angular 6 - Что я делаю не так, чтобы получить данные из наблюдаемых? - PullRequest
Новая
       6

Angular 6 - Что я делаю не так, чтобы получить данные из наблюдаемых?

0 голосов
/ 27 октября 2018

Прежде всего, я последовал этому примеру: Герои в качестве ссылки.Единственным отличием является метод 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);
}

console.log из Observable показывает: 

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

Но console.log этого.contasMae показывает: 

Resultado: undefined

Что не так?Как я могу получить результат в this.contasMae?

Кто-то может помочь?

Заранее спасибо.

1 Ответ

0 голосов
/ 27 октября 2018

Это зависит от того, что вы пытаетесь сделать с this.contasMae.

Полагаю, поскольку это компонент, который вы пытаетесь отобразить в шаблоне.Если это так, вы можете просто: 

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

async - это угловой канал, который обрабатывает асинхронные данные в ваших представлениях.

Для перебора списка в вашем представлении: 

<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 не будет доступен до тех пор, пока не будет разрешено значение, полученное из вашей наблюдаемой, иприсвоил результат this.contasMae.

...