NgOnChanges Not Firing After HTTP Request

Question

I have an issue with ngonchanges not firing.

I have this component:

@Component({
    selector: 'conversation-detail',
    templateUrl: './conversation-detail.component.html'
})
export class ConversationDetailComponent implements OnChanges{
    @Input()
    selectedConversation: Conversation;

    title = 'Conversation Detail';    
    convoMessages: Array<Message> = [];


    constructor(
            private _messageService: MessageService
    ){};

    ngOnChanges(changes: SimpleChanges){        
        this.getMessages();
    }

    ngOnInit(): void{

    } 

    private getMessages(){
        if(this.selectedConversation != undefined){
            this._messageService.getMessagesForConversation(this.selectedConversation.ConversationId).then(
                data => {
                    if (data) {
                        this.convoMessages = data.serviceResult as Array<Message>;
                    } else {
                        //This really should never happen
                        console.error('Error retrieving users data: Data object is empty');
                    }
                },
                error => {
                    //loader.dismiss();
                    console.error('Error retrieving users data');
                    console.dir(error);
                }
            );
        }
    }    

}

The ngonchanges will fire the first time selectedConversation changes. GetMessages is called and it loads in the message data. After that ngonchanges no longer fires when selectedConversation changes.

If I comment out the function call to getMessages then ngonchanges will fire every time selectedConversation changes.

so, I'm not sure what is going on in getMessages that cuts off ngonchanges from firing off. The request returns data and the call ends. Anyone have any ideas?

Did you check the console to see you don't have a js error that prevents further execution of the code? — Meir, Apr 21 '17 at 13:34

Prashant Bajpai · Answer 1 · 2017-05-02T10:33:21.357

1

Please change your component as :

@Component({
    selector: 'conversation-detail',
    templateUrl: './conversation-detail.component.html',
    changeDetection: ChangeDetectionStrategy.Default
})

This works fine for me.

edited May 02 '17 at 10:33

answered Apr 25 '17 at 09:35

Prashant Bajpai

11
2

score 0 · Answer 2 · answered Apr 21 '17 at 13:38

ngOnChanges only fire if @Input change reference, for example Input type of string, boolean, number, immutable object.

assume [selectedConversation] bind to an array arrSelected, if you do something like arrSelected.push, the array does not change ref so ngOnChanges won't fire.

so you need using immutable array, using concat, slice, etc to change the array reference

NgOnChanges Not Firing After HTTP Request

2 Answers2