子调用具有http请求的父函数后，如何在子组件中更新父变量

Question

I cannot seem to see the changed @Input in the child component after it was updated in parents http request.

This is an example:

Parent

import { ChildComp } from './child.component';

@Component({
    template: <child [counter]="a" [updateCounter]="updateCounter"></child>,
    directives: [ChildComp]
})

export class ParentComponent { 
    public a = 1;
    public CallBack:Function;

    constructor(private _http:Http) {}

    public ngOnInit() {
        this.CallBack = this.updateCounter.bind(this);
    } 

    public updateCounter() {
        this._http.get('/newcounter/').subscribe(
            data => {
                // update counter
                this.a = JSON.parse(data['_body']);
            },
            error => {},
            () => console.log('updated counter')
        );

    }
}

Child

@Component({
    selector: 'child',
    template: `
        <button class="btn btn-default" (click)="updateCounter()"></button>
        <p>counter: {{ counter }}</p>
    `,
    inputs: ["counter", "updateCounter"]
})

export class ChildComponent { 
    public counter;
    public updateCounter:Function;

    constructor() {}
}

So, this works if there is not http request. But once I have the request, the child view will not update the counter .

Any ideas? What am I missing?

One hack i have now is to setTimeout on child component to update the counter 500ms after the call to updateCounter

Answer 1

Amend the updateCounter function of your parent component like this:

public updateCounter() {
    let that = this;
    this._http.get('/newcounter/').subscribe(
        data => {
            // update counter
            that.a = JSON.parse(data['_body']);
        },
        error => {},
        () => console.log('updated counter')
    );

}

Using this in the promise does not reference your class anymore. So you need to keep a reference to this in another variable and use that one instead.