Angular2双向绑定停止工作

Question

我在更新视图时遇到问题。在ngOnInit我正在解决一个承诺。如果它不能执行HTTP请求（即没有互联网），那么catch应该查看本地存储来查找用户并在视图中显示信息。

重要提示：使用.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或者让那个外部函数使用那个函数。

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); 
    } 
}); 

如果这不起作用，请发布您的模板。