Angular2 Two-Way-Bindingが停止しました

Question

私のビューを更新する際に問題があります。 ngOnInitでは私は約束を解決しています。 HTTPリクエスト（インターネットがない）ができない場合、キャッチはローカルストレージを調べてユーザーを見つけ、その情報をビューに表示する必要があります。

重要：.navigateを使用してログインページからホームページにユーザーをリダイレクトすると動作しません。ホームページでコンポーネントを一度リロードすると動作します。

私は間違っていますか？

これは、ホーム・ページ・コンポーネントのコードです：

ngOnInit() { 

this.mySession.isLoggedIn() 
// make request to server via HTTP 

.then(userInfo => { 
    // if request successful do: 
    this.user = userInfo; 
    this.user2 = userInfo; 

    if(this.user.searchbar === false) { 
    $('#searchbar').prop('checked', false); 
    } else if(this.user.searchbar) { 
    $('#searchbar').prop('checked', true); 
    } 
}) 

// if request via HTTP fails do: 
.catch(() => { 
    // find user in Local Storage and set it equal to this.user; 
    this.getLocalUser(); 
    console.log('catch within home component'); 
}); 

} 

getLocalUser() { 
chrome.storage.sync.get(this.signupInfo,(response) => { 
    this.user = {}; 

    this.user = response; 
    this.user2 = response; 

    console.log('this.user: '); 
    console.log(this.user); 

    if(this.user.searchbar === false) { 
    $('#searchbar').prop('checked', false); 
    } else if(this.user.searchbar) { 
    $('#searchbar').prop('checked', true); 
    } 
}); 
} 

これはホームページのコンポーネント内で私のHTMLテンプレートです：

<h4> 
    <div id="firstGreeting" class="greeting">Good Day, {{ user.firstName }}.</div> 
    <span class="highlight disappear">How is your day going?</span> 
    <div class="highlight second">Do you mind telling why?</div> <br> 
    <span class="forMonth"> - {{ stringMonth }} - </span> 
</h4> 

これは、リダイレクトログイン・コンポーネント内のコードですホームページへのログインから：

signup() { 
const thePromise = this.mySession.signUp(this.signupInfo); 

thePromise.then(userInfo => { 
    console.log('User was saved in the server'); 
    // Save user to Local Storage using Chrome API 

    chrome.storage.sync.set(this.signupInfo,() => { 
    // Notify that we saved. 
    console.log('User was saved locally in the pc'); 

    this.myNavigator.navigate(['home']); 
    return; 
    }); 
}); 

thePromise.catch((err) => { 
    this.error = err; 
    console.log(this.error) 
}); 
} 

Answer 1

あなたのコードには参照の問題があります。関数（応答）内の 'this'は、関数（応答）の参照です。 Arrow Functionsを使用するか、またはthis = thisを関数外にして、その内部関数を使用できます。

getLocalUser() { 
chrome.storage.sync.get(this.signupInfo, (response) => { 
    this.user = {}; 

    this.user = response; 
    this.user2 = response; 

    console.log('this.user: '); 
    console.log(this.user); 

    if(this.user.searchbar === false) { 
    $('#searchbar').prop('checked', false); 
    } else if(this.user.searchbar) { 
    $('#searchbar').prop('checked', true); 
    } 
}); 

これが機能しない場合は、テンプレートを投稿してください。