Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/433.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript NgOnChanges在HTTP请求后不触发_Javascript_Angular_Ngonchanges - Fatal编程技术网

Javascript NgOnChanges在HTTP请求后不触发

Javascript NgOnChanges在HTTP请求后不触发,javascript,angular,ngonchanges,Javascript,Angular,Ngonchanges,我对ngonchanges不开火有意见 我有这个部分: @Component({ selector: 'conversation-detail', templateUrl: './conversation-detail.component.html' }) export class ConversationDetailComponent implements OnChanges{ @Input() selectedConversation: Conversatio

我对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);
                }
            );
        }
    }    

}
@组件({
选择器:“对话详细信息”,
templateUrl:“./conversation detail.component.html”
})
导出类ConversationDetailComponent实现OnChanges{
@输入()
selectedConversation:对话;
标题=‘对话细节’;
消息:数组=[];
建造师(
私有消息服务:消息服务
){};
ngOnChanges(更改:SimpleChanges){
这是getMessages();
}
ngOnInit():void{
} 
私有getMessages(){
if(this.selectedConversation!=未定义){
此.\u messageService.getMessagesForConversation(此.selectedConversation.ConversationId)。然后(
数据=>{
如果(数据){
this.convalmessages=data.servicesult作为数组;
}否则{
//这真的不应该发生
console.error('检索用户数据时出错:数据对象为空');
}
},
错误=>{
//loader.discouse();
console.error(“检索用户数据时出错”);
console.dir(错误);
}
);
}
}    
}
ngonchanges将在第一次选择对话更改时触发。调用GetMessages并将其加载到消息数据中。此后,当selectedConversation更改时,ngonchanges不再触发

如果我注释掉getMessages的函数调用,则每次selectedConversation更改时都会触发ngonchanges


所以,我不确定getMessages中发生了什么,它阻止了ngonchanges的发射。请求返回数据,调用结束。有人有什么想法吗?

只有在
@Input
更改
引用时才会触发更改,例如
字符串的输入类型
布尔值
数字
,不可变对象

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


因此,您需要使用不可变数组,使用
concat
slice
等来更改数组引用

请将您的组件更改为:

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

这对我来说很好。

您是否检查了控制台以确定没有js错误阻止进一步执行代码?控制台中没有错误。