HTTP 请求后未触发 NgOnChanges答案

【问题标题】：NgOnChanges Not Firing After HTTP RequestHTTP 请求后未触发 NgOnChanges
【发布时间】：2017-09-18 12:52:09
【问题描述】：

我遇到了 ngonchanges 没有触发的问题。

我有这个组件：

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

}

ngonchanges 将在 selectedConversation 首次更改时触发。调用 GetMessages 并加载消息数据。之后，当 selectedConversation 更改时，ngonchanges 不再触发。

如果我注释掉对 getMessages 的函数调用，那么每次 selectedConversation 更改时都会触发 ngonchanges。

所以，我不确定 getMessages 中发生了什么会切断 ngonchanges 的触发。请求返回数据，调用结束。有人有什么想法吗？

【问题讨论】：

您是否检查了控制台以查看您没有阻止进一步执行代码的 js 错误？
控制台没有错误。

标签： javascript angular ngonchanges

【解决方案1】：

ngOnChanges 仅在 @Input 更改 reference 时触发，例如输入类型为 string、boolean、number、不可变对象。

假设 [selectedConversation] 绑定到数组 arrSelected，如果您执行 arrSelected.push 之类的操作，则数组不会更改 ref，因此 ngOnChanges 不会触发。

所以您需要使用不可变数组，使用concat、slice 等来更改数组引用

【讨论】：

【解决方案2】：

请将您的组件更改为：

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

这对我来说很好。

【讨论】：