Skip to main content
adicionou 5 caracteres ao conteúdo
Fonte Link

A pergunta é antiga, mas creio que a resposta possa ajudar alguém.

Toda requisição http, no angular, retorna um Observable, e para que as operações do Observable ocorram é necessário se "inscrever" no obsersavable por meio do .subscribe(). E através dessas inscrições que os observables "sabem" quando novos dados foram emitidos.

No entanto, por se tratar de um "evento" assíncrono qualquer lógica síncrona realizada não funcionará corretamente(código de ex. abaixo). Toda e qualquer transformação de dados do observable deve estar ou no método .subscribe() ou no .pipe() (utilizando os operadores do RXJS).

.subscribe(data => {
        this.lista = data;
        console.log(this.lista);
        this.lista = data; // atribuir valor async para variável sync
        // }

      });

O seu código, não está incorreto, porém entra no caso que comentei, você está tentando passar para uma variável síncrona (this.lista) um valor assíncrono. Em alguns casos esse código funcionará, pois a requisição pode ser completada antes do componente ser renderizado, mas na grande maioria dos casos isso não ocorre, a requisição é completada após o componente ser renderizado tornando o valor de this.lista undefined.

Uma possível solução seria mover o local do subscribe para o template. E nesse caso não seria necessária a variável lista.

Component:

export class HomeComponent implements OnInit {
        observable$: Observable<any>;
        
        ngOnInit():void{
            this.observable$ = this.http.get('api')
              .pipe(aqui pode ser utilizado qualquer operador do rxjs);
        }
    }

Template:

<div *ngFor="let item of observable$ | async as itens">
     <span>{{item | json}}</span>
</div>

Através do pipe async é realizado o subscribe e será mostrado no template assim que a requisição for concluída. E quando o component for destruído (ngOnDestroy()) o pipe fará o unsubscribe automático.

Outra possível solução também, caso você não queria utilizar fluxos assíncronos seria por meio dos resolvers que não irão permitir a renderização do componente enquanto as requisições não forem concluídas, e com isso, os dados das requisições quando estiverem no componente não serão assíncronos (Observables).

A pergunta é antiga, mas creio que a resposta possa ajudar alguém.

Toda requisição http, no angular, retorna um Observable, e para que as operações do Observable ocorram é necessário se "inscrever" no obsersavable por meio do .subscribe(). E através dessas inscrições que os observables "sabem" quando novos dados foram emitidos.

No entanto, por se tratar de um "evento" assíncrono qualquer lógica síncrona realizada não funcionará corretamente(código de ex. abaixo). Toda e qualquer transformação de dados do observable deve estar ou no método .subscribe() ou no .pipe() (utilizando os operadores do RXJS).

.subscribe(data => {
        this.lista = data;
        console.log(this.lista);
        this.lista = data; // atribuir valor async para variável sync
        // }

      });

O seu código, não está incorreto, porém entra no caso que comentei, você está tentando passar para uma variável síncrona (this.lista) um valor assíncrono. Em alguns casos esse código funcionará, pois a requisição pode ser completada antes do componente ser renderizado, mas na grande maioria dos casos isso não ocorre, a requisição é completada após o componente ser renderizado tornando o valor de this.lista undefined.

Uma possível solução seria mover o local do subscribe para o template. E nesse caso não seria necessária a variável lista.

Component:

export class HomeComponent implements OnInit {
        observable$: Observable<any>;
        
        ngOnInit():void{
            this.observable$ = this.http.get()
              .pipe(aqui pode ser utilizado qualquer operador do rxjs);
        }
    }

Template:

<div *ngFor="let item of observable$ | async as itens">
     <span>{{item | json}}</span>
</div>

Através do pipe async é realizado o subscribe e será mostrado no template assim que a requisição for concluída. E quando o component for destruído (ngOnDestroy()) o pipe fará o unsubscribe automático.

Outra possível solução também, caso você não queria utilizar fluxos assíncronos seria por meio dos resolvers que não irão permitir a renderização do componente enquanto as requisições não forem concluídas, e com isso, os dados das requisições quando estiverem no componente não serão assíncronos (Observables).

A pergunta é antiga, mas creio que a resposta possa ajudar alguém.

Toda requisição http, no angular, retorna um Observable, e para que as operações do Observable ocorram é necessário se "inscrever" no obsersavable por meio do .subscribe(). E através dessas inscrições que os observables "sabem" quando novos dados foram emitidos.

No entanto, por se tratar de um "evento" assíncrono qualquer lógica síncrona realizada não funcionará corretamente(código de ex. abaixo). Toda e qualquer transformação de dados do observable deve estar ou no método .subscribe() ou no .pipe() (utilizando os operadores do RXJS).

.subscribe(data => {
        this.lista = data;
        console.log(this.lista);
        this.lista = data; // atribuir valor async para variável sync
        // }

      });

O seu código, não está incorreto, porém entra no caso que comentei, você está tentando passar para uma variável síncrona (this.lista) um valor assíncrono. Em alguns casos esse código funcionará, pois a requisição pode ser completada antes do componente ser renderizado, mas na grande maioria dos casos isso não ocorre, a requisição é completada após o componente ser renderizado tornando o valor de this.lista undefined.

Uma possível solução seria mover o local do subscribe para o template. E nesse caso não seria necessária a variável lista.

Component:

export class HomeComponent implements OnInit {
        observable$: Observable<any>;
        
        ngOnInit():void{
            this.observable$ = this.http.get('api')
              .pipe(aqui pode ser utilizado qualquer operador do rxjs);
        }
    }

Template:

<div *ngFor="let item of observable$ | async as itens">
     <span>{{item | json}}</span>
</div>

Através do pipe async é realizado o subscribe e será mostrado no template assim que a requisição for concluída. E quando o component for destruído (ngOnDestroy()) o pipe fará o unsubscribe automático.

Outra possível solução também, caso você não queria utilizar fluxos assíncronos seria por meio dos resolvers que não irão permitir a renderização do componente enquanto as requisições não forem concluídas, e com isso, os dados das requisições quando estiverem no componente não serão assíncronos (Observables).

Fonte Link

A pergunta é antiga, mas creio que a resposta possa ajudar alguém.

Toda requisição http, no angular, retorna um Observable, e para que as operações do Observable ocorram é necessário se "inscrever" no obsersavable por meio do .subscribe(). E através dessas inscrições que os observables "sabem" quando novos dados foram emitidos.

No entanto, por se tratar de um "evento" assíncrono qualquer lógica síncrona realizada não funcionará corretamente(código de ex. abaixo). Toda e qualquer transformação de dados do observable deve estar ou no método .subscribe() ou no .pipe() (utilizando os operadores do RXJS).

.subscribe(data => {
        this.lista = data;
        console.log(this.lista);
        this.lista = data; // atribuir valor async para variável sync
        // }

      });

O seu código, não está incorreto, porém entra no caso que comentei, você está tentando passar para uma variável síncrona (this.lista) um valor assíncrono. Em alguns casos esse código funcionará, pois a requisição pode ser completada antes do componente ser renderizado, mas na grande maioria dos casos isso não ocorre, a requisição é completada após o componente ser renderizado tornando o valor de this.lista undefined.

Uma possível solução seria mover o local do subscribe para o template. E nesse caso não seria necessária a variável lista.

Component:

export class HomeComponent implements OnInit {
        observable$: Observable<any>;
        
        ngOnInit():void{
            this.observable$ = this.http.get()
              .pipe(aqui pode ser utilizado qualquer operador do rxjs);
        }
    }

Template:

<div *ngFor="let item of observable$ | async as itens">
     <span>{{item | json}}</span>
</div>

Através do pipe async é realizado o subscribe e será mostrado no template assim que a requisição for concluída. E quando o component for destruído (ngOnDestroy()) o pipe fará o unsubscribe automático.

Outra possível solução também, caso você não queria utilizar fluxos assíncronos seria por meio dos resolvers que não irão permitir a renderização do componente enquanto as requisições não forem concluídas, e com isso, os dados das requisições quando estiverem no componente não serão assíncronos (Observables).