变量在组件中不确定，但在提供商的模板中定义

Question

i有一个称为profile.ts的组件，我正在通过{{user.fullname}}中的profile.html中的变量用户，该值像应该一样填充一个值。我正在从user.ts中获取用户变量，它可以很好地工作。

当我转到profile.ts中的fulllname时，即使在模板文件中定义了它，它也会返回未定义？我不确定为什么会发生这种情况，如果它在模板中工作，则必须在组件文件中工作，对

profile.ts相关代码：

public user;
public posts;
constructor(public navCtrl: NavController, public toastCtrl: 
ToastService, public userProvider: User){
this.user = userProvider;
console.log(this.user.fullName); // Comes back undefined. Should come back as "John Smith"
}

profile.html：

<span class="infos_name">{{user?.fullName}}</span> // Shows the fullName variable, which is "John Smith"

任何想法为什么会发生这种情况？

Answer 1

我弄清楚了发生了什么。我跳过了良好的编程设计的最基本原则，并试图在变量像@Sebaferreras所说的变量之前访问它们。这是我解决问题的方法，以防其他人将来遇到这个问题。

constructor(public auth: AuthProvider) {
  this.uid = auth.getUser().uid;
  this._DB = firebase.firestore();
  this._DB.collection('users').doc(this.uid).onSnapshot(user => {
    this.setUser(user);
   });
 }
  setUser(user) {
   this.user = {
    'uid': this.uid,
    'fullName': user.data().fullName,
     ...
 }
}
getUser() {
  return this.user;
}

然后，当我尝试访问用户对象时，我只会调用getuser（）和繁荣。我受够了。Getters and Setters，我不知道我如何忽略一些对良好编程设计如此简单和如此重要的东西。