2017-12-20 11 views
1

私はprofile.tsというコンポーネントを持っていて、{{user.fullName}}経由でprofile.htmlで変数userを利用しています。私はuser.tsからユーザ変数を取得しています。これはうまく動作します。変数はコンポーネントでは定義されていませんが、プロバイダのテンプレートで定義されています

profile.tsのuser.fullNameにアクセスすると、テンプレートファイルに定義されていても、定義されていません。なぜこれが起こっているのか正確にはわかりません。テンプレートで作業している場合、コンポーネントファイルで作業している必要があります。

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" 

任意のアイデア?

+0

ここで、 'user.fullName'の値を設定していますか?私はこれが起こっていると思うのは、コンストラクタがそのプロパティが設定される前に実行されているためです。そのため、 "John Smith"が 'user.fullName'プロパティに設定されるとすぐにビューが更新されます'? '演算子では、最初はビューが何も表示されません。なぜなら、未定義のため、プロパティが初期化されると、ビューは" John Smith "と表示されます) – sebaferreras

+0

だから私はそれを購読して、人口は? –

+0

this.userの値をチェックすると、値が必要になります。 this.user.fullNameを含む。私はthis.userを印刷することができますが、私は私の人生のために直接this.user.fullNameの価値を得ることはできません。 –

答えて

0

私は何が起こっているのか把握しました。私は良いプログラミングデザインの最も基本的な原則をスキップし、@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を呼び出します。私はこれで終わりです。ゲッターとセッター、私はどのように私は良いプログラミングのデザインにとてもシンプルで重要なものを見過ごすことができたか分かりません。

関連する問題