변수가 구성 요소에서 정의되어 있지 않지만 공급자의 템플릿에 정의되어 있습니다.

저는 profile.ts라는 구성 요소가 있고 {{user.fullName}}을 통해 profile.html에서 변수 사용자를 사용하고 있습니다. . 나는 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"

어떤 생각?

출처

2017-12-20 Jordan Benge

여기서'user.fullName'의 값을 설정하고 있습니까? 나는 이것이 발생하기 전에'constructor'이 그 속성이 설정되기 전에 실행되고 있다고 생각합니다. 그래서 "John Smith"가'user.fullName' 속성으로 설정 되 자마자 뷰가 업데이트됩니다. '? '연산자를 사용하면 먼저 정의되지 않았기 때문에 뷰가 아무것도 표시되지 않고 속성이 초기화되면 뷰가 "John Smith"를 표시하도록 업데이트됩니다. – sebaferreras

그래서 구독하고 값이 될 때까지 기다려야합니다. 인구가 많습니까? –

this.user 값을 확인할 때 원하는 값이 있습니다. this.user.fullName을 포함합니다. this.user를 인쇄 할 수는 있지만 직접 액세스하려고하면 다시 정의되지 않은 채로 this.user.fullName 값을 얻지 못합니다. –

나는 무슨 일이 일어나고 있는지 알아 냈습니다. 좋은 프로그래밍 디자인의 가장 기본적인 원칙을 건너 뛰고 @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, 좋은 프로그래밍 디자인에 너무 단순하고 중요한 것을 간과 할 수는 없었습니다.

출처

2017-12-28 18:56:14

변수가 구성 요소에서 정의되어 있지 않지만 공급자의 템플릿에 정의되어 있습니다.

답변

관련 문제