Angular 2 Binding in Component

Question

I have the following scenario.

I have a list in one webservice, but when I expect a return to pass the value to my component, it just doesn’t do the Binding because it takes time, and even when it does, in case I call the WS again, it does not update the data.

Below is code of how I am trying to implement. I did this example on top without putting the imports, just to put here and expose the way I’m trying to implement.

@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;
        });
    }
}

Answer 1

What happens is that the treatDados only runs once in the Oninit of the Component. So we need to run data processing right after getting the data to solve the problem.

In my-Component.ts

1. Exchange the ngOnInit for ngOnChanges, so when the request response is finished it will change the array and update the Component.

     export class MeuComponentComponent implements OnChanges {
   
     ngOnChanges(){
       this.trataDados();
     }

2. Remove the private from the property _vaiPraView for it to be accessible in the template (my-Component.html)

    _vaiPraView: any;

In test-page.component.ts

1. Remove the private from the property list

Tips

• Avoid error if data is not yet ready

trataDados () {
    if(!this.testes || this.testes.length == 0) {
      return;
    }

Reference:

• Official Documentation of the Onchanges https://angular.io/api/core/OnChanges
• About accessing private properties within the template https://medium.com/@erVikas1/angular-and-typescript-public-properties-a5a3c363b790 https://github.com/devoto13/angular2-private-members-example

Answer 2

You need to call the function trataDados() ngOnChange to update the field lista of the component MeuComponent when the input testes be updated.

Answer 3

The right one would be to use a variable of type Observable... and use the method subscribe... this ensures that it will be executed after the return...

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

Answer 4

Modify the first component to run the function every time you "receive" new data you can do so

@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() {        
    }    
}