4

Tenho o seguinte cenário.

Possuo uma lista em um webservice, porém quando eu espero um retorno para passar o valor para meu componente, ele simplesmente não faz o binding porque é demorado, e mesmo quando traz, caso eu chame o WS novamente, ele não atualiza os dados.

Segue abaixo código de como estou tentando implementar. Eu fiz esse exemplo por cima sem colocar os imports, só para colocar aqui e expor a maneira que estou tentando implementar.

@Component({
    template:'<div *ngFor="let dados of lista">{{dados.nome}}<br/></div>',
    selector: 'meu-component'
})
MeuComponent {
    private _vaiPraView: any;
    @Input() testes: any;

    ngOnInit() {
        this.trataDados();
    }

    trataDados () {
        this._vaiPraView = [];
        let idx = 0;
        for(let teste of this.testes) {
            teste.realvector = idx;
            idx++;
            this._vaiPraView.push(teste);
        }
    }
}

//html... com binding (não rola...)
@Component({
    template:'<meu-component [testes]="lista"></meu-component>',
    directives: [MeuComponent]
})
export class TestePage {
    private lista: any;

    constructor() {

    }

    ngOnInit () {
        //Um evento demorado.. formato de data exemplo: [{nome: 'oi'},{nome: 'tudobem'},{nome: 'contigo'}]
        AlgumaCoisa.then(data => {
            this.lista = data;
        });
    }
}

//html... sem binding rola porém quero que fique do jeito acima e detecte a alteração.
@Component({
    template:'<meu-component [testes]="[{nome: 'oi'},{nome: 'tudobem'},{nome: 'contigo'}]"></meu-component>',
    directives: [MeuComponent]
})
export class TestePage {
    private lista: any;

    constructor() {

    }

    ngOnInit () {
        //Um evento demorado.. formato de data exemplo: [{nome: 'oi'},{nome: 'tudobem'},{nome: 'contigo'}]
        AlgumaCoisa.then(data => {
            this.lista = data;
        });
    }
}
2
  • Na primeira parte ali MeuComponent { ... você não usou o export class, será que o problema poderia ser ali?
    – wdarking
    26/08/2016 às 0:39
  • Não acredito que fosse isso @wdarking ... Nossa quanto tempo essa pergunta rs... Era iniciando no angular ainda. 28/08/2018 às 0:20

5 Respostas 5

0

Voce precisa chamar a função trataDados() no ngOnChange para atualizar o campo lista do componente MeuComponent quando o input testes for atualizado.

0

O certo seria usar uma variável do tipo Observable... e nela utilizar o método subscribe... isso garante que será executado após o retorno...

metodo.subscribe(result => {
   this.lista = result.json();
   console.log(result);
});
0

Modifica o primeiro componente pra executar a função toda vez que "receber" novos dados você pode fazer dessa maneira

@Component({
    template:'<div *ngFor="let dados of lista">{{dados.nome}}<br/></div>',
    selector: 'meu-component'
})
MeuComponent {
    private _vaiPraView: any;
    @Input() testes: any;

    
    @Input('testes')
    set name(testes: any[]) {        
        this._vaiPraView = [];
        let idx = 0;
        for(let teste of testes) {
            teste.realvector = idx;
            idx++;
            this._vaiPraView.push(teste);
        }
    }

    ngOnInit() {        
    }    
}
0

O que acontece é que o tratarDados só executa uma vez no OnInit do Component. Então precisamos executar o tratar dados logo após obter os dados para resolver o problema.

Em meu-component.ts

  1. Troque o ngOnInit por ngOnChanges, assim quando a resposta da requisição terminar ele irá alterar o array e atualizar o component.
     export class MeuComponentComponent implements OnChanges {
   
     ngOnChanges(){
       this.trataDados();
     }
  1. Retire o private da propriedade _vaiPraView para ela estar acessível no template (meu-component.html)
    _vaiPraView: any;

Em test-page.component.ts

  1. Retire o private da propriedade lista

Dicas

  • Evite erro caso os dados ainda não estejam prontos
trataDados () {
    if(!this.testes || this.testes.length == 0) {
      return;
    }

Referencia:

0

Crie um Componente Reativo

Para obter uma melhor performance transforme seu componente em um componente reativo com rxjs.

Uma boa pratica ao utilizar Observables e usar o pipe async do angular pois evita erros de memory leak.

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { BehaviorSubject, map } from 'rxjs';

@Component({
  selector: 'meu-component',
  template:'<div *ngFor="let dados of vaiPraViewList$ | async">{{dados.nome}}<br/></div>',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MeuComponent {

  public testes$ = new BehaviorSubject([]);
  @Input() private set testes(testes: any[]) {
    this.testes$.next(testes);
  }

  public get vaiPraViewList$() {
    return this.testes$.pipe(
      map((testes) => {
        return testes.map((item, index) => {
          item.realvector = index;
          return item;
        });
      })
    );
  }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .