[英]Angular component not updating when value changed
I'm having a bit of trouble getting an ngIf
to update when one of my variables changes.当我的一个变量发生变化时,我在更新
ngIf
时遇到了一些麻烦。
I have an ionic (angular) app that has user authentication.我有一个具有用户身份验证的离子(角度)应用程序。 When the app loads it should hide the navigation menu and display only a login view if the user is logged out.
当应用程序加载时,它应该隐藏导航菜单并在用户退出时仅显示登录视图。 When the user is logged in the app should display a loading screen while the user's data is being retrieved from the server and then show the appropriate view and display the navigation menu.
当用户登录时,应用程序应在从服务器检索用户数据时显示加载屏幕,然后显示适当的视图并显示导航菜单。 I cannot get the navigation menu to display.
我无法显示导航菜单。 I think it has something to do with the code that changes
isLoggedIn
running after the view has finished rendering, but I'm not certain as any attempts to force a re-render have yielded no changes我认为这与更改
isLoggedIn
在视图完成渲染后运行的代码有关,但我不确定,因为任何强制重新渲染的尝试都没有产生任何变化
export class AppComponent {
public user: User
public isLoggedIn = false;
public appPages = [
{ title: 'Home', url: '/assignment', icon: 'home', role: 'Employee'},
{ title: 'Home', url: '/supervisor', icon: 'home', role: 'Supervisor'},
{ title: 'Assignments', url: '/assign', icon: 'body', role: 'Supervisor'},
{ title: 'Manager', url: '/manager', icon: 'briefcase', role: 'Supervisor'},
{ title: 'Settings', url: '/settings', icon: 'settings', role: 'any'}
];
constructor(private router: Router, private auth: Auth, private userService: UserService) {
this.router.navigate(["/loader"]);
this.authorise();
}
authorise(){
if(localStorage.getItem("uid")){
console.log("user Is Logged In: Getting data");
this.userService.getUser(localStorage.getItem("uid")).subscribe(res => {
console.log("assigning user")
console.log(res);
this.user = res
this.checkRole();
});
}else{
this.router.navigate(["/login"])
}
}
checkRole(){
console.log("checking....");
if(this.user.role == "Employee"){
this.isLoggedIn = true;
this.router.navigate(["/assignment"]);
}else{
this.isLoggedIn = true;
this.router.navigate(["/supervisor"]);
}
}
}```
My template File (just the relevant part)我的模板文件(只是相关部分)
<ion-app>
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay" *ngIf="isLoggedIn">
<ion-content>
<ion-list id="menu-list">
..........
As you can see, When the app loads, isLoggedIn
is false, forcing the ion-menu
to not be rendered.如您所见,当应用程序加载时,
isLoggedIn
为 false,从而强制不呈现ion-menu
。
The script constructor then calls authorise and asynchronously retrieves the user's file from a Firestore database.然后脚本构造函数调用授权并从 Firestore 数据库异步检索用户的文件。 Once that data is retrieved it calls
checkRole
and loads the appropriate page in a router-outlet
(not included in this example).一旦检索到该数据,它就会调用
checkRole
并在router-outlet
中加载适当的页面(未包含在此示例中)。 once the user's role is established checkRole
set's isLoggedin
to true
which is where I want the template to start displaying the menu bar.建立用户角色后,
checkRole
集的isLoggedin
为true
,这是我希望模板开始显示菜单栏的位置。
does anyone know how to make this happen?有谁知道如何做到这一点?
thanks:)谢谢:)
do someting like:做类似的事情:
import { MenuController } from '@ionic/angular'; // import menu controller
constructor(private menu: MenuController) {
this.menu.enable(false); // make your menu hidden by default.
}
// inside your checkRole Function enable your menu.
checkRole(){
if(this.user.role == "Employee"){
//this.isLoggedIn = true;
this.menu.enable(true);
this.router.navigate(["/assignment"]);
}else{
//this.isLoggedIn = true;
this.menu.enable(true);
this.router.navigate(["/supervisor"]);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.