Javascript 局部变量在刷新时变为未定义。角度2

我正在开发聊天应用程序。有一个chat.component.ts连接到服务并获取“messages”和“displayName”

在chat.component.html中，我按如下方式绑定displayName：

您以以下身份登录：{{displayName}

这就是chat.component.ts的外观：

从'@angular/core'导入{Component，OnInit，AfterViewChecked，ViewChild，ElementRef}；
从“../af.service”导入{AfService}；
从“angularfire2/数据库”导入{FirebaseListObservable}；
@组成部分({
选择器：'应用程序聊天'，
templateUrl:'./chat.component.html'，
样式URL:['./chat.component.css']
})
导出类组件实现OnInit{
公共newMessage:string；
公开信息：FirebaseListObservable；
公共显示名称：字符串；
构造函数（公共AF:AfService）{
this.messages=this.AF.messages；
this.displayName=this.AF.displayName；
}
ngOnInit（）{}
@ViewChild（“scrollMe”）私有myScrollContainer:ElementRef；
ngAfterViewChecked（）{
这个.scrollToBottom（）；
}
scrollToBottom（）：void{
试一试{
this.myScrollContainer.nativeElement.scrollTop=this.myScrollContainer.nativeElement.scrollHeight；
}catch（err）{console.log（'Scroll to bottom failed yo！'）}
}
isMe（电子邮件）{
如果（email==this.AF.email）
返回true；
其他的
返回false；
}
sendMessage（）{
this.AF.sendMessage（this.newMessage）；
this.newMessage=''；
}
}

因此，虽然我同意amal的评论，但我看不出

this.displayName

是在哪里设置的。我以前遇到过这个问题。因为没有以前的组件，所以您需要一种页面保存显示名称的方法。我通常使用本地存储来完成这项工作

      localStorage.setItem('displayName',JSON.stringify(this.displayName));

检索数据并

    this.displayName= JSON.parse(localStorage.getItem('displayName'));

---

检索数据。也就是说，我看不出你在哪里设置域名，这会导致一个问题。我正在回答您关于刷新的一般概念性问题。

如果我理解正确，您应该在

AfService

constructor(public db: AngularFireDatabase, public afAuth: AngularFireAuth) {
    this.messages = this.db.list('messages');

    this.afAuth.auth.subscribe(res => {
        if (res && res.uid) {
          //user logged in
          this.email= res.email;
          this.displayName = res.displayName;
        } else {
          //user not logged in or logged out
        }
     });
}

---

好的。现在很清楚为什么您有可用的

消息

，而

displayName

不在您的聊天组件中。在AFService的构造函数中，您设置的是

消息的值，而不是
显示名称的值。因此，当该服务在ChatComponent中实例化时，您正在将该组件的
消息
和
displayName
属性设置为来自AFService的属性。但是AFService在其自己的构造函数中只有
消息的值。
因此，解决问题的简单方法是在服务的构造函数中定义
displayName
的值。
如果需要从其他地方异步获取该值，那么您需要基于此重构组件或服务的代码。
无论哪种方式，都要确保在组件中引用AFService时，引用其构造函数中实例化的AFService的某些属性
 您的组件不显示在任何位置分配的
this.displayName
值。因此，当
console.log（this.AF.displayName）
返回
未定义的
时，正确显示
console.log（this.displayName）
是有意义的。很抱歉，amal，我发布了一个已编辑的代码版本。我将编辑以避免混淆。谢谢更新。如果问题仍然存在，请您也发布您的AFService？好的，我已经更新了。这个服务我没有太多麻烦，我试着添加一个getDisplayName（）函数，但没有成功。Legman谢谢你的帮助。我已经试着避开这个问题一段时间了。你会推荐这是解决这个问题的“理想”方式吗？我不会说这是理想的解决方案，但如果这有意义的话，这是我处理问题的方式。它应该可以解决您的问题，但可能有一种更优雅的方法来处理这个问题，但在这一点上，它取决于您的整个应用程序的设置方式。因此，我建议将其作为一种解决方案