Question

我有一个名为profile.ts的组件，我在profile.html中通过{{user.fullName}}利用变量user，它会填充一个像它应该的值。我从user.ts获取用户变量，这非常有效。

当我去profile.ts中访问user.fullName时，它会返回undefined，即使它是在模板文件中定义的吗？我不确定为什么会这样，如果它在模板中工作，它必须在组件文件中工作，对吧？

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（）和boom。我受够了。 Getters and Setters，我不知道如何忽略一些如此简单且对于良好编程设计如此重要的事情。

变量在组件中未定义，但在提供程序的模板中定义

1 个答案: